¿Cómo usar wp_nav_menu para crear un menú desplegable tipo select?

Question

¿Cómo usar wp_nav_menu para crear un menú desplegable tipo select?

1 sept 2011, 23:50:27

Vistas: 53.2K

Votos: 22

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

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

¿Cómo puedo agregar el valor del enlace en la declaración 'before'? ¿Hay una mejor manera de hacer esto? Conozco wp_dropdown_pages, pero eso no funciona porque quiero que los usuarios puedan controlar el menú desde la página "Menús".

Christopher John

765

desplegable seleccionar menús

Todas las respuestas a la pregunta

Comentarios

De hecho, cuando se usa la parte "items_wrap", eso elimina los elementos de la lista, por lo que el marcado está bien. Sin embargo, revisaré el enlace. ¡Gracias!

Christopher John

2 sept 2011 00:01:17

sí, pero eso no maneja los <UL> anidados :)

onetrickpony

2 sept 2011 00:02:19

En realidad sí lo hace :-)

Christopher John

2 sept 2011 00:09:27

Según la fuente, no lo hace, a menos que estés usando un walker personalizado...

onetrickpony

2 sept 2011 00:21:06

¿Funciona esto o no?

chrisl-921fb74d

13 dic 2011 18:38:23

Mostrar los 7 comentarios restantes

He encontrado esto útil:

Puedes seguir estas respuestas para simplificar el código CSS de un menú desplegable.

Añade una clase parent para los elementos que tienen un submenú
Añade una clase depth (depth0, depth1, depth2...)

Añade a function.php de 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 reemplázalo por el nombre de tu menú

Un ejemplo de código CSS podría ser:

#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 es el ID de la lista UL principal (necesitarás actualizarlo también)

JackTheKnife

319

3 mar 2016 21:47:15

El plugin Dropdown Menus sí responde a la pregunta: wp_nav_menu no se puede usar para crear menús desplegables tipo select, mientras que el plugin proporciona una práctica función dropdown_menu() que realiza esta tarea de manera admirable.

Jake Rayson

111

2 ago 2012 14:17:01

onetrickpony 13.6K · Accepted Answer · 2011-09-01T23:58:47Z

No puedes hacer esto con wp_nav_menu, porque genera elementos de lista, y tu código produciría un marcado inválido.

Intenta usar wp_get_nav_menu_items() en su lugar.

Una solución rápida para un menú desplegable con un walker personalizado:

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{

    // no genera la etiqueta de apertura de hijos (`<ul>`)
    public function start_lvl(&$output, $depth){}

    // no genera la etiqueta de cierre de hijos    
    public function end_lvl(&$output, $depth){}

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

      // añade espaciado al título según la profundidad actual
      $item->title = str_repeat("&nbsp;", $depth * 4) . $item->title;

      // llama al prototipo y reemplaza la etiqueta <li>
      // del marcado generado...
      parent::start_el(&$output, $item, $depth, $args);
      $output = str_replace('<li', '<option', $output);
    }

    // reemplaza el cierre </li> con la etiqueta option de cierre
    public function end_el(&$output, $item, $depth){
      $output .= "</option>\n";
    }
}

En tus plantillas, úsalo así:

wp_nav_menu(array(
  'theme_location' => 'primary', // tu ubicación de tema aquí
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));