Como usar o wp_nav_menu para criar um menu suspenso de seleção de menu?

20

Estou usando o seguinte dentro da função wp_nav_menu para criar um menu suspenso de seleção onde cada item de menu é uma opção na lista suspensa de seleção ...

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

Como adiciono o valor do link na declaração 'before' ? Existe uma maneira melhor de fazer isso? Eu sei sobre wp_dropdown_pages , mas isso não funciona porque eu quero que os usuários possam controlar o menu a partir do Página "Menus".

    
por Chris Molitor 01.09.2011 / 22:50

3 respostas

24

Você não pode fazer isso com wp_nav_menu, porque ele gera itens de lista e você gera uma marcação inválida com seu código.

Tente usar wp_get_nav_menu_items () .

Uma solução rápida para um menu suspenso com um walker personalizado:
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";
    }
}

Nos seus modelos, use-o da seguinte forma:

wp_nav_menu(array(
  'theme_location' => 'primary', // your theme location here
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));
    
por onetrickpony 01.09.2011 / 22:58
0

Eu achei isso útil:

Você pode seguir qualquer resposta para simplificar o menu dropdovn do código css.

  1. Adicione uma classe parent para itens que tenham um submenu
  2. adicione depth class (depth0, depth1, depth2 ...)

adicione ao function.php seu tema

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;
}

agora no header.php

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

header-menu substituído pelo nome do seu menu

O código de exemplo CSS pode ser o

#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;
}

onde #menu-header-menu - id a lista principal do UL (você precisa atualizar também)

    
por JackTheKnife 03.03.2016 / 20:47
-1

Menus suspensos plugin faz responder à pergunta: wp_nav_menu can ' t ser usado para criar o menu suspenso de seleção de menu, enquanto o plug-in fornece a função nifty dropdown_menu() que faz o trabalho de maneira admirável.

    
por Jake Rayson 02.08.2012 / 13:17