wake-up-neo.net

Wie erstelle ich mit wp_nav_menu ein Dropdown-Menü?

Ich benutze das Folgende in der Funktion wp_nav_menu , 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 kenne wp_dropdown_pages , aber das funktioniert nicht, weil ich möchte, dass Benutzer das Menü über die Seite "Menüs" steuern können.

dropdownselectmenus
21
Chris Molitor

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 es mit wp_get_nav_menu_items () .

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>',
));
25
onetrickpony

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 parent für Elemente mit einem Untermenü hinzu
  2. depth class 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 wird durch den Namen Ihres Menüs ersetzt

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 das auch aktualisieren)

0
JackTheKnife