webentwicklung-frage-antwort-db.com.de

Simple Navigation Walker - Wrapper-Klasse um das erste Untermenü

Ich versuche, das erste Untermenü einer Navigation in ein separates div zu packen. Keines der Kinder oder Unterstufen sollte die gleiche Behandlung erhalten.

Ich bin wirklich neu in dem Nav Walker-Ding und ich habe wirklich Probleme und könnte Hilfe brauchen ????

Dies ist die Struktur, die ich erreichen möchte:

<ul class="menu">
    <li class="menu-item">
        <a href="#">Menu Item</a>
        <!-- wrapper-class around the first sub-menu -->
        <div class="sub-menu__wrapper">
            <ul class="sub-menu">
                <li class="menu-item">
                    <a href="#">Menu Item</a>
                    <!-- NO wrapper-class around following levels -->
                    <ul class="sub-menu">
                        <li>...</li>
                    </ul>
                </li>
            </ul>
        </div>
    </li>
</ul>

Ich dachte, es wäre einfach mit einer einfachen if-Anweisung zu machen, die nur den Untermenü-Wrapper auf der ersten Ebene ausgibt, aber irgendwie wird die folgende HTML-Ausgabe ziemlich schlecht verwechselt.

Hier ist meine Walker-Klasse:

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

Welche druckt die folgende Struktur:

<ul class="menu">
    <li class="menu-item">
        <a href="#">Menu Item</a>
        <!-- wrapper-class around the first sub-menu -->
        <div class="sub-menu__wrapper">
            <ul class="sub-menu">
                <li class="menu-item">Parent Menu Item</li>
                <!-- the following items are supposed to be nested in the "parent menu item" before -->
                <li class="menu-item">Child Menu Item</li>
                <li class="menu-item">Child Menu Item</li>
                <li class="menu-item">Child Menu Item</li>
                <li class="menu-item">Parent Menu Item</li>
                <!-- again the following items are supposed to be nested in the "parent menu item" before -->
                <li class="menu-item">Child Menu Item</li>
                <li class="menu-item">Child Menu Item</li>
                <li class="menu-item">Child Menu Item</li>
                ...
            </ul>
        </div>
    </li>
</ul>

Wie Sie in den Kommentaren sehen können, habe ich versucht, die Ausgabe zu ändern, wenn die if-Anweisung falsch ist, aber das bringt die Ausgabe noch mehr durcheinander ????

Jede Hilfe, konstruktive Kritik oder Anstupsen in die richtige Richtung wird sehr geschätzt ????

1
Jörg Mayer

Um ehrlich zu sein, ich weiß nicht wirklich, warum meine Lösung funktioniert, aber es funktioniert ????

Ich habe mein Snippet auf dieser Lösung aufgebaut und die Ausgabe an meine Bedürfnisse angepasst: Benutzerdefinierter Navigations-Walker mit unterschiedlicher Ausgabe je nach Tiefe

class sublevel_wrapper extends Walker_Nav_Menu {
    // add classes to ul sub-menus
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        // depth dependent classes
        $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
        $display_depth = ( $depth + 1); // because it counts the first submenu as 0
        $classes = array(
            'sub-menu',
            'menu-depth-' . $display_depth
        );
        $class_names = implode( ' ', $classes );

        // build html
        if ($display_depth == 1) {
            $output .= "\n" . $indent . '<div class="sub-menu__wrapper"><ul class="' . $class_names . '">' . "\n";
        } else {
            $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";
        }
    }
}

Im Vergleich zu meinem ersten Snippet lässt er die end_lvl-Funktion komplett aus und aus welchem ​​Grund auch immer hat es funktioniert. Mir hat auch gefallen, wie er die $ display_depth-Variable hinzufügt.

1
Jörg Mayer
function sevenMenu(  ) {
$menu_name = 'primary'; // specify custom menu slug
$menu_list ='';
if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
    $menu = wp_get_nav_menu_object($locations[$menu_name]);
    $menu_items = wp_get_nav_menu_items($menu->term_id);

    foreach( $menu_items as $menu_item ) {
        if( $menu_item->menu_item_parent == 0 ) {

            $parent = $menu_item->ID;

            $menu_array = array();
            foreach( $menu_items as $submenu ) {
                if( $submenu->menu_item_parent == $parent ) {
                    $bool = true;
                    $menu_array[] = '<li><a href="' . $submenu->url . '">' . $submenu->title . '</a></li> ' ."\n";
                }
            }
            if( $bool == true && count( $menu_array ) > 0 ) {
                $menu_list .= '<li role="presentation" class="dropdown">' ."\n";
                $menu_list .= '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">' . $menu_item->title . ' <span class="caret"></span></a>' ."\n";

                $menu_list .= '<ul class="dropdown-menu">' ."\n";
                $menu_list .= implode( "\n", $menu_array );
                $menu_list .= '</ul>' ."\n";

            } else {

                $menu_list .= '<li>' ."\n";
                $menu_list .= '<a href="' . $menu_item->url . '">' . $menu_item->title . '</a>' ."\n";
                $menu_list .= '<li>' ."\n";
            }

        }

        // end <li>

    }

} else {
    $menu_list = '<!-- no menu defined in location "'.$theme_location.'" -->';
}

echo $menu_list;}

Check Out Dieses Bootstrap-Menü können Sie in Ihrer function.php hinzufügen, Ihren menu_name ändern und dieses Menü in Ihre Vorlage aufrufen, indem Sie:

<?php if (function_exists(sevenMenu())) sevenMenu(); ?>
1
Roland Allla