¿Cómo usar wp_nav_menu para crear un menú desplegable de selección?

20

Estoy usando lo siguiente dentro de la función wp_nav_menu para crear un menú desplegable de selección donde cada elemento del menú es una opción en el menú desplegable de selección ...

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

¿Cómo agrego el valor del enlace en la declaración 'before' ? ¿Hay una mejor manera de hacer esto? Sé sobre wp_dropdown_pages , pero no funciona porque quiero que los usuarios puedan controlar el menú desde Página de "menús".

    
pregunta Chris Molitor 01.09.2011 - 22:50

3 respuestas

24

No puedes hacer esto con wp_nav_menu, porque genera elementos de la lista y generarás un marcado no válido con tu código.

Intente usar wp_get_nav_menu_items () en su lugar.

Una solución rápida para un menú desplegable con un andador 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";
    }
}

En tus plantillas, úsalo así:

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

Lo he encontrado útil:

Puedes seguir cualquier respuesta para simplificar el menú desplegable de código css.

  1. Agregue una clase parent para los elementos que tienen un submenú
  2. agregar depth class (depth0, depth1, depth2 ...)

agrega a function.php tu 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;
}

ahora en header.php

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

header-menu reemplazado por el nombre de tu menú

El código de ejemplo CSS puede ser el

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

donde #menu-header-menu - identifica la lista UL principal (también debe actualizar eso)

    
respondido por el JackTheKnife 03.03.2016 - 20:47
-1

Menús desplegables El complemento responde la pregunta: wp_nav_menu can ' Puede usarse para crear un menú desplegable de selección, mientras que el complemento proporciona una función ingeniosa dropdown_menu() que hace el trabajo de manera admirable.

    
respondido por el Jake Rayson 02.08.2012 - 13:17

Lea otras preguntas en las etiquetas