Title: Crear un custom menu
Last modified: 22 de mayo de 2020

---

# Crear un custom menu

 *  [jyanez95](https://es.wordpress.org/support/users/jyanez95/)
 * (@jyanez95)
 * [hace 6 años, 4 meses](https://es.wordpress.org/support/topic/crear-un-custom-menu/)
 * Buenos días,
 * Necesito crear un menú customizado en la home de la página web de un cliente 
   para que en el menú aparezca las colecciones de los productos (categorías).
 * Esto lo he podido crear siguiendo una guía de Internet donde me indican que utilice
   la función: **wp_nav_menu** y este es el código:
 *     ```
       function category_menu($event) {     
   
           if(is_shop() || is_product_category()){        
               wp_nav_menu(
                       array(
                           'menu' => 'menu_tienda',
                           'container'      => false,
                           'menu_class'     => 'shop-menu',
                           'walker'         => new Walker_Nav_Menu_Dropdown(),
                           'items_wrap'     => '<div class="mobile-menu"><form><select onchange="if (this.value) window.location.href=this.value" class="selection">%3$s</select></form></div>',
                           'after'          => '<span class="plus-minus"></span>',
                           'fallback_cb'    => false,
                       )
               ); 
   
           }
       }
   
       class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu {
       	function start_lvl(&$output, $depth){
       		$indent = str_repeat("\t", $depth); // don't output children opening tag (<code><ul></code>)
       	}
   
       	function end_lvl(&$output, $depth){
       		$indent = str_repeat("\t", $depth); // don't output children closing tag
       	}
   
       	/**
       	* Start the element output.
       	*
       	* @param  string $output Passed by reference. Used to append additional content.
       	* @param  object $item   Menu item data object.
       	* @param  int $depth     Depth of menu item. May be used for padding.
       	* @param  array $args    Additional strings.
       	* @return void
       	*/
       	function start_el(&$output, $item, $depth, $args) {
   
                   $category = get_queried_object();
                   /*echo $category->term_id;
   
                   echo "<pre>";
                   var_dump($item);
                   echo "</pre>";
                   //die;*/
                   $selected = '';
                   if($category->term_id == $item->object_id){
                       $selected = 'selected';
                   }
        		$url = '#' !== $item->url ? $item->url : '';
        		$output .= '<option '.$selected.' value="' . $url . '">' . $item->title;
       	}	
   
       	function end_el(&$output, $item, $depth){
       		$output .= "</option>\n"; // replace closing </li> with the option tag
       	}
       }
       ```
   
 * Este menú es el que aparece justo en el desplegable debajo del logo [colecciones]
 * El problema que tengo es que el desplegable genera un <select> donde no le puedo
   dar estilo a las <option> y no sé como cambiar esto para que en vez de ser un
   <select>, sea una lista `<ul><li>` para darle todo el estilo que me solicita 
   el cliente.
 * Por favor, tenéis alguna idea de como podría modificarlo para transformar este
   select en una lista? o si hay otra manera de crear este menú?
 * Muchas gracias
    -  Este debate fue modificado hace 6 años, 4 meses por [jyanez95](https://es.wordpress.org/support/users/jyanez95/).
    -  Este debate fue modificado hace 6 años, 4 meses por [jyanez95](https://es.wordpress.org/support/users/jyanez95/).
 * La página con la que necesito ayuda: _[[accede](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fes.wordpress.org%2Fsupport%2Ftopic%2Fcrear-un-custom-menu%2F%3Foutput_format%3Dmd&locale=es_ES)
   para ver el enlace]_

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)

 *  Moderador [LGrusin](https://es.wordpress.org/support/users/lgrusin/)
 * (@lgrusin)
 * [hace 6 años, 4 meses](https://es.wordpress.org/support/topic/crear-un-custom-menu/#post-12177445)
 * Según parece es un formulario para móviles. Prueba sin el argumento `'items_wrap'`
 * Aquí tienes más info
    [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)
 *  Iniciador del debate [jyanez95](https://es.wordpress.org/support/users/jyanez95/)
 * (@jyanez95)
 * [hace 6 años, 4 meses](https://es.wordpress.org/support/topic/crear-un-custom-menu/#post-12177788)
 * Buenos días [@lgrusin](https://es.wordpress.org/support/users/lgrusin/)
 * Muchas gracias por tu respuesta y lamento la demora en responder, pero lo he 
   estado probando lo que me has indicado.
 * He conseguido transformarlo en una lista, pero sabrías como puedo hacer que sea
   un desplegable (dropdown)?
 * Con CSS he visto diferentes guias que se puede conseguir en escritorio, pero 
   en versión movil el efecto «hover» no funciona y no sé muy bien como se podría
   hacer… 🙁
 * Nuevamente gracias y disculpa por la tardanza
 *  Moderador [LGrusin](https://es.wordpress.org/support/users/lgrusin/)
 * (@lgrusin)
 * [hace 6 años, 4 meses](https://es.wordpress.org/support/topic/crear-un-custom-menu/#post-12177792)
 * Pregunto, ¿no es más fácil crear un menú que contenga las categorías de los productos?
   Te ahorras poner todo ese código y el menú será el que venga con el tema en la
   barra superior.
 *  Iniciador del debate [jyanez95](https://es.wordpress.org/support/users/jyanez95/)
 * (@jyanez95)
 * [hace 6 años, 4 meses](https://es.wordpress.org/support/topic/crear-un-custom-menu/#post-12177799)
 * Hola [@lgrusin](https://es.wordpress.org/support/users/lgrusin/)
 * Sí, pero el cliente me pide que en el centro haya un menú desplegable con las
   categorías de los productos para que te llevé a su página de categoría.
 * Es por ello, que al principio lo conseguí, pero utilizando el `select`, pero 
   a este `select` y sus `option` no le puedo dar estilo porque los navegadores 
   no lo permiten.
 * Entonces, pensé en pasar esto a una lista siguiendo tu respuesta, pero claro,
   ahora al hacerlo mobile, no va a funcionar correctamente.
 * Y ahora mismo no sé cómo hacer este requisito que me pide el cliente, ya que 
   es lo único que me queda pendiente. 🙁
 * Gracias.
 *  Moderador [LGrusin](https://es.wordpress.org/support/users/lgrusin/)
 * (@lgrusin)
 * [hace 6 años, 4 meses](https://es.wordpress.org/support/topic/crear-un-custom-menu/#post-12177805)
 * Mira si aquí encuentras más información
    [https://www.w3schools.com/css/css_navbar_horizontal.asp](https://www.w3schools.com/css/css_navbar_horizontal.asp)

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)

 El debate ‘Crear un custom menu’ está cerrado a nuevas respuestas.

## Etiquetas

 * [menu](https://es.wordpress.org/support/topic-tag/menu/)
 * [navegación](https://es.wordpress.org/support/topic-tag/navegacion/)

 * En: [WordPress Avanzado](https://es.wordpress.org/support/forum/wp-avanzado/)
 * 5 respuestas
 * 2 participantes
 * Última respuesta de: [LGrusin](https://es.wordpress.org/support/users/lgrusin/)
 * Última actividad: [hace 6 años, 4 meses](https://es.wordpress.org/support/topic/crear-un-custom-menu/#post-12177805)
 * Estado: sin resolver

## Debates

### Debates populares

### Debates sin respuestas

### Debates que no son soporte

### Debates resueltos

### Debates no resueltos

### Todos los debates
