Wie erstelle ich mit wp_nav_menu ein Dropdown-Menü?

21

Ich verwende das Folgende in der wp_nav_menuFunktion, um ein Auswahl-Dropdown-Menü zu erstellen, in dem jeder Menüpunkt eine Option in der Auswahl-Dropdown-Liste darstellt.

'items_wrap' => '<select>%3$s</select>'
'before'     => '<option value="">'
'after'      => '</option>'

Wie füge ich den Linkwert in die 'before'Deklaration ein? Gibt es einen besseren Weg, dies zu tun? Ich weiß wp_dropdown_pages, aber das funktioniert nicht, weil ich möchte, dass Benutzer das Menü über die Seite "Menüs" steuern können.

dropdown select menus Chris Molitor
quelle

Antworten:

25

Sie können dies mit wp_nav_menu nicht tun, da es Listenelemente ausgibt und Sie mit Ihrem Code ein ungültiges Markup generieren.

Versuchen Sie stattdessen, wp_get_nav_menu_items () zu verwenden.

Eine schnelle Lösung für ein Dropdown-Menü mit einem benutzerdefinierten Walker:

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{

    // don't output children opening tag (`<ul>`)
    public function start_lvl(&$output, $depth){}

    // don't output children closing tag    
    public function end_lvl(&$output, $depth){}

    public function start_el(&$output, $item, $depth, $args){

      // add spacing to the title based on the current depth
      $item->title = str_repeat("&nbsp;", $depth * 4) . $item->title;

      // call the prototype and replace the <li> tag
      // from the generated markup...
      parent::start_el(&$output, $item, $depth, $args);
      $output = str_replace('<li', '<option', $output);
    }

    // replace closing </li> with the closing option tag
    public function end_el(&$output, $item, $depth){
      $output .= "</option>\n";
    }
}

Verwenden Sie es in Ihren Vorlagen wie folgt:

wp_nav_menu(array(
  'theme_location' => 'primary', // your theme location here
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));
ein Trickpony
quelle
1
Tatsächlich werden bei Verwendung des Teils "items_wrap" die Listenelemente entfernt, sodass das Markup in Ordnung ist. Ich werde aber den Link überprüfen. Vielen Dank!
Chris Molitor
ja, aber das geht nicht mit den verschachtelten <UL>s :)
onetrickpony
Es tut tatsächlich :-)
Chris Molitor
1
Laut der Quelle nicht, es sei denn, Sie verwenden eine benutzerdefinierte
Gehhilfe
Funktioniert das oder nicht?
Chrisjlee
0

Ich fand das nützlich:

Sie können den Antworten folgen, um das Dropdown-Menü für den CSS-Code zu vereinfachen.

  1. Fügen Sie eine Klasse parentfür Elemente hinzu, die über ein Untermenü verfügen
  2. depthKlasse hinzufügen (depth0, depth1, depth2 ...)

füge dein Theme zu function.php hinzu

class DD_Wolker_Menu extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
        $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
        $GLOBALS['dd_depth'] = (int) $depth;
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
}
add_filter('nav_menu_css_class','add_parent_css',10,2);
function  add_parent_css($classes, $item){
     global  $dd_depth, $dd_children;
     $classes[] = 'depth'.$dd_depth;
     if($dd_children)
         $classes[] = 'parent';
    return $classes;
}

jetzt in der header.php

wp_nav_menu( array( 'container_class' => '','container' => '',  'menu' => 'header-menu', 'walker'=> new DD_Wolker_Menu ) );

header-menu ersetzt durch den Namen Ihres Menüs

CSS-Beispielcode kann der sein

#menu-header-menu{
    margin: 0;
    padding: 0;
}
#menu-header-menu  ul{

}

#menu-header-menu> li{
    display: inline;
    margin-left: 1.618em;
}
#menu-header-menu  li{
    list-style: none;
}
#menu-header-menu  li a{
    text-decoration: none;
    font-size:  1em;
    font-family:    'Lato',Helvetica,Arial,sans-serif ;
    letter-spacing: 1px;
}
#menu-header-menu li.parent::after{
    content:'+';
}

#menu-header-menu  .sub-menu {
   display: none;
   position: absolute;
   background-color: #fff;
}

#menu-header-menu  li:hover>.sub-menu{
    display: inline;
    width: auto;
    height: auto;
    border: solid 1px #BBBBBB;
    z-index: +1;
}

where #menu-header-menu- id die Haupt-UL-Liste (Sie müssen dies ebenfalls aktualisieren)

JackTheKnife
quelle
-1

Drop - Down - Menüs Plugin tut die Frage beantworten: wp_nav_menukann nicht verwendet werden , wählen Sie das Menü Dropdown - Liste zu erstellen, während Plugin geschickte bietet dropdown_menu()Funktion, die die Arbeit bewundernswert macht.

Jake Rayson
quelle