Wie benutze ich wp_nav_menu um ein Auswahlmenü zu erstellen?

Ich verwende innerhalb der wp_nav_menu function Folgendes, um ein Auswahl-Dropdown-Menü zu erstellen, in dem jeder Menüeintrag eine Option im Auswahl-Dropdown-Menü ist.

 'items_wrap' => '%3$s' 'before' => '' 'after' => '' 

Wie füge ich den Link-Wert in der 'before' Deklaration hinzu? Gibt es einen besseren Weg? Ich kenne wp_dropdown_pages , aber das funktioniert nicht, weil ich möchte, dass Benutzer das Menü von der Seite “Menüs” aus steuern können.

Solutions Collecting From Web of "Wie benutze ich wp_nav_menu um ein Auswahlmenü zu erstellen?"

Sie können dies nicht mit wp_nav_menu 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 (`
    `) 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(" ", $depth * 4) . $item->title; // call the prototype and replace the
  • tag // from the generated markup... parent::start_el(&$output, $item, $depth, $args); $output = str_replace('
  • with the closing option tag public function end_el(&$output, $item, $depth){ $output .= "\n"; } }

In deinen Vorlagen verwende es so:

 wp_nav_menu(array( 'theme_location' => 'primary', // your theme location here 'walker' => new Walker_Nav_Menu_Dropdown(), 'items_wrap' => '', )); 

Ich habe das nützlich gefunden:

Sie können alle Antworten verfolgen, um das Dropdown-Menü css code dropdovn zu vereinfachen.

  1. Fügen Sie einen parent classneintrag für Elemente mit einem Untermenü hinzu
  2. addiere die depth (depth0, depth1, depth2 …)

füge zu function.php dein Thema 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; } 

wo #menu-header-menu – id die Haupt-UL-Liste (Sie müssen diese auch aktualisieren)

Dropdown Menüs Plugin beantwortet die Frage: wp_nav_menu kann nicht verwendet werden, um Dropdown-Menü zu erstellen, während Plugin bietet raffinierte dropdown_menu() function, die den Job bewundernswert.