Thêm container vào menu phụ nav_menu


9

Có cách nào để tôi có thể quấn một div xung quanh menu ul.sub của wp_nav_menu không

Vì vậy, ví dụ đánh dấu sẽ đi từ

<ul class="menu">

    <li><a href="/">Item 1</a></li>
    <li>
        <a href="/">Item 2</a>

        <ul class="sub-menu">

            <li><a href="/">Item 1</a></li>
            <li><a href="/">Item 1</a></li>

        </ul>
   </li>
    <li><a href="/">Item 1</a></li>
    <li><a href="/">Item 1</a></li>

</ul>

đến đây

<ul class="menu">

    <li><a href="/">Item 1</a></li>
    <li>
        <a href="/">Item 2</a>

        <div class="sub-menu-wrap">

            <ul class="sub-menu">

                <li><a href="/">Item 1</a></li>
                <li><a href="/">Item 1</a></li>

            </ul>

        </div>

   </li>

    <li><a href="/">Item 1</a></li>
    <li><a href="/">Item 1</a></li>

</ul>

Trong đó "sub-menu-quấn" là div tùy chỉnh.

Điều này có thể không?

Câu trả lời:


21

Sử dụng một walker tùy chỉnh , mở rộng các phương pháp start_lvl()end_lvl.

Mã mẫu, không được kiểm tra:

class WPSE_78121_Sublevel_Walker extends Walker_Nav_Menu
{
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class='sub-menu-wrap'><ul class='sub-menu'>\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }
}

Sử dụng trong chủ đề của bạn:

wp_nav_menu(
    array (
        'theme_location' => 'your-theme-location-EDIT-THIS',
        'walker'         => new WPSE_78121_Sublevel_Walker
    )
);

Có thể thực hiện thay đổi trên cơ sở mỗi menu? ví dụ như lớp thực đơn có sẵn bên trong Walker_Nav_Menuvà đó là trẻ em?
Dân.

@Dan. Vâng, đúng vậy.
fuxia

@fuxia, cách tiếp cận này vẫn tốt cho WP 5+ hay bạn có đề xuất một kỹ thuật thay thế để thực hiện điều tương tự không?
klewis

@klewis Cái này vẫn hoạt động.
fuxia

Làm thế nào để làm điều này chỉ ở cấp độ đầu tiên.
jho1086
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.