Title: Menu desplegable blackbird
Last modified: 6 de agosto de 2016

---

# Menu desplegable blackbird

 *  Resuelto [lutijimenez](https://es.wordpress.org/support/users/lutijimenez/)
 * (@lutijimenez)
 * [hace 11 años, 1 mes](https://es.wordpress.org/support/topic/menu-desplegable-blackbird/)
 * Hola buenas tardes.
 * Estoy realizando una web con WP, he seleccionado el tema blackbird y todo funciona
   correctamente a excepción de una cosa.
 * Cuando accedo a la web mediante el movil no consigo que se despliegue el menú.
   Este consta de menu y submenu.
 * El problema creo que es que cuando intenta abrirse el menú como tiene ul y li
   se hace lio y lo abre y lo cierra.
 * Este es el código:
 * blackbird funtion:
 *     ```
       function blackbird_add_menuclass($ulclass) {
           return preg_replace('/
       <ul>/', '<ul class="ddsmoothmenu">', $ulclass, 1);
       }
   
       add_filter('wp_page_menu', 'blackbird_add_menuclass');
       add_action('init', 'blackbird_register_custom_menu');
   
       function blackbird_register_custom_menu() {
           register_nav_menu('custom_menu', __('Main Menu', 'black-bird'));
       }
   
       function blackbird_nav() {
           if (function_exists('wp_nav_menu'))
               wp_nav_menu(array('theme_location' => 'custom_menu', 'container_id' => 'menu', 'menu_class' => 'ddsmoothmenu', 'fallback_cb' => 'blackbird_nav_fallback'));
           else
               blackbird_nav_fallback();
       }
   
       function blackbird_nav_fallback() {
           ?>
           <div id="menu">
               <ul class="ddsmoothmenu">
                   <?php
                   wp_list_pages('title_li=&show_home=1&sort_column=menu_order');
                   ?>
               </ul>
           </div>
           <?php
       }
   
       function blackbird_nav_menu_items($items) {
           if (is_home()) {
               $homelink = '<li class="current_page_item">' . '<a href="' . home_url('/') . '">' . __('Home', 'black-bird') . '</a>';
           } else {
               $homelink = '
       <li>' . '<a href="' . home_url('/') . '">' . __('Home', 'black-bird') . '</a></li>
       ';
           }
           $items = $homelink . $items;
           return $items;
       }
   
       add_filter('wp_list_pages', 'blackbird_nav_menu_items');
       ```
   
 * PHP:
 *     ```
       <div class="grid_18 alpha">
                                   <div id="MainNav">
                                       <a href="#"><?php _e('Pages Navigation Menu', 'black-bird'); ?><span></span></a>
                                       <?php blackbird_nav(); ?>
                                   </div></div>
       ```
   
 * Alguien podría echarme una mano?
 * Muchas gracias

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

 *  [toledano](https://es.wordpress.org/support/users/streetdog/)
 * (@streetdog)
 * [hace 11 años, 1 mes](https://es.wordpress.org/support/topic/menu-desplegable-blackbird/#post-40526)
 * Ese tipo de menús usan una combinación de CSS y JavaScript para mantener abierto
   el menú. Prueba la consola de depuración en tu navegador para averiguar que es
   lo que falla. O publica la URL de tu sitio para poder revisar el código.
 *  Iniciador del debate [lutijimenez](https://es.wordpress.org/support/users/lutijimenez/)
 * (@lutijimenez)
 * [hace 11 años, 1 mes](https://es.wordpress.org/support/topic/menu-desplegable-blackbird/#post-40527)
 * Hola,
 * Pues si tienes razón, pero no puedo publicar la url porque de momento la tango
   en local.
    Adjunto el codigo de javascript y el css:
 * esta es la función JQuery:
 *     ```
       (function(jQuery){
       		$it_mobile_nav = jQuery('#MainNav .mobile_nav'),
       		$it_nav_list = jQuery('#MainNav ul.ddsmoothmenu');
   
       	jQuery(document).ready(function(){
       		it_menu( $it_nav_list, $it_mobile_nav, 'mobile_menu', 'it_mobile_menu' );
   
       		function it_menu( menu, append_to, menu_id, menu_class ){
       			var $menu_nav;
   
       			menu.clone().attr('id',menu_id).removeClass().attr('class',menu_class).appendTo( append_to );
       			$menu_nav = append_to.find('> ul');
       			$menu_nav.find('li:first').addClass('it_first_menu_item');
   
       			append_to.click( function(){
       				if ( jQuery(this).hasClass('closed') ){
       					jQuery(this).removeClass( 'closed' ).addClass( 'opened' );
       					$menu_nav.slideDown(500);
   
       				} else {
       					jQuery(this).removeClass( 'opened' ).addClass( 'closed' );
       					$menu_nav.slideUp(500);
   
       				}
       				return false;
       			} );
   
       			append_to.find('a').click( function(event){
       				event.stopPropagation();
       			});
       		}		
   
       	});
       })(jQuery)(function(jQuery){
       		$it_mobile_nav = jQuery('#MainNav .mobile_nav'),
       		$it_nav_list = jQuery('#MainNav ul.ddsmoothmenu');
   
       	jQuery(document).ready(function(){
       		it_menu( $it_nav_list, $it_mobile_nav, 'mobile_menu', 'it_mobile_menu' );
   
       		function it_menu( menu, append_to, menu_id, menu_class ){
       			var $menu_nav;
   
       			menu.clone().attr('id',menu_id).removeClass().attr('class',menu_class).appendTo( append_to );
       			$menu_nav = append_to.find('> ul');
       			$menu_nav.find('li:first').addClass('it_first_menu_item');
   
       			append_to.click( function(){
       				if ( jQuery(this).hasClass('closed') ){
       					jQuery(this).removeClass( 'closed' ).addClass( 'opened' );
       					$menu_nav.slideDown(500);
   
       				} else {
       					jQuery(this).removeClass( 'opened' ).addClass( 'closed' );
       					$menu_nav.slideUp(500);
   
       				}
       				return false;
       			} );
   
       			append_to.find('a').click( function(event){
       				event.stopPropagation();
       			});
       		}		
   
       	});
       })(jQuery)(function(jQuery){
       		$it_mobile_nav = jQuery('#MainNav .mobile_nav'),
       		$it_nav_list = jQuery('#MainNav ul.ddsmoothmenu');
   
       	jQuery(document).ready(function(){
       		it_menu( $it_nav_list, $it_mobile_nav, 'mobile_menu', 'it_mobile_menu' );
   
       		function it_menu( menu, append_to, menu_id, menu_class ){
       			var $menu_nav;
   
       			menu.clone().attr('id',menu_id).removeClass().attr('class',menu_class).appendTo( append_to );
       			$menu_nav = append_to.find('> ul');
       			$menu_nav.find('li:first').addClass('it_first_menu_item');
   
       			append_to.click( function(){
       				if ( jQuery(this).hasClass('closed') ){
       					jQuery(this).removeClass( 'closed' ).addClass( 'opened' );
       					$menu_nav.slideDown(500);
   
       				} else {
       					jQuery(this).removeClass( 'opened' ).addClass( 'closed' );
       					$menu_nav.slideUp(500);
   
       				}
       				return false;
       			} );
   
       			append_to.find('a').click( function(event){
       				event.stopPropagation();
       			});
       		}		
   
       	});
       })(jQuery)
       ```
   
 * Este es el CSS:
 *     ```
       .it_mobile_menu li {
           margin: 0;
       }
       .it_mobile_menu li a {
           font-size: 12px;
           text-decoration: none;
           text-transform: capitalize;
           text-shadow:none;
           border-bottom: 1px solid #e2e0e0;
           margin: 0 !important;
       }
       .it_mobile_menu li:last-child a {
           border-bottom:none;
           padding-bottom: 15px;
       }
       .it_mobile_menu li a:hover {
           color: #2565ac;
       }
       .it_mobile_menu > li.current_page_item > a {
           color: #2565ac;
       }
       #mobile_menu {
           width: 318px;
           border: 1px solid #e2e0e0 !important;
           left: -1px;
           padding: 0;
           padding-bottom: 20px;
           background: #f8f8f8;
           top: 42px !important;
           -moz-border-radius: 10px;
           -webkit-border-radius: 10px;
           border-radius: 10px;
           border-top-left-radius: 0px;
           -moz-border-radius-topleft: 0px;
           border-top-right-radius: 0px;
           -webkit-border-top-left-radius: 0px;
           -moz-border-radius-topright: 0px;
           -webkit-border-top-right-radius: 0px;
           z-index: 9999px;
           list-style:none;
       }
       #mobile_menu ul {
           list-style:none;
       }
       .it_mobile_menu {
           position: absolute;
           top: 46px !important;
           left: 3px;
           z-index: 1000;
           display: none;
           text-align: left;
       }
       .it_mobile_menu ul {
           display: block !important;
           visibility: visible !important;
           border-bottom: 1px solid #e2e0e0;
       }
       .it_mobile_menu ul li a {
           margin-left:12px !important;
           padding-top: 12px !important;
           padding-bottom: 4px !important;
       }
       .it_mobile_menu ul li:last-child a {
           padding-bottom: 10px !important;
       }
       .it_mobile_menu ul a {
           border-bottom: none;
       }
       .mobile_nav {
           color: #3B3B3B;
           display: none;
           background: #f8f8f8;
           border: 1px solid #e2e0e0;
           position: relative;
           padding: 15px 22px 11px 46px;
           font-size: 12px;
           text-transform: uppercase;
           font-weight: bold;
           width:250px;
       }
       .mobile_nav:before, .mobile_nav:after {
           content: '';
           position: absolute;
           top: 0;
           width: 2px;
           height: 100%;
       }
       .mobile_nav:before {
           left: 0;
       }
       .mobile_nav:after {
           right: 0;
       }
       .mobile_nav:hover {
           text-decoration: none;
           color:#3B3B3B;
       }
       .mobile_nav > span {
           display: block;
           width: 15px;
           height: 10px;
           background: url(images/responsive_arrow.png) no-repeat;
           position: absolute;
           top: 19px;
           left: 63px;
           -moz-transition: all 0.5s ease-in-out;
           -webkit-transition: all 0.5s ease-in-out;
           -o-transition: all 0.5s ease-in-out;
           transition: all 0.5s ease-in-out;
       }
       .mobile_nav.opened > span {
           -moz-transform: rotate(-180deg);
           -webkit-transform: rotate(-180deg);
           -o-transform: rotate(-180deg);
           transform: rotate(-180deg);
       }
       ```
   
 * Y en el anterior post las funciones de javascript
 * Muchas gracias por todo
 *  Iniciador del debate [lutijimenez](https://es.wordpress.org/support/users/lutijimenez/)
 * (@lutijimenez)
 * [hace 11 años, 1 mes](https://es.wordpress.org/support/topic/menu-desplegable-blackbird/#post-40534)
 * Solucionado, era problema del proxy.
 * Muchas gracias

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

 El debate ‘Menu desplegable blackbird’ está cerrado a nuevas respuestas.

 * En: [Guías – Resolución de problemas](https://es.wordpress.org/support/forum/manuales-y-resolucion-de-problemas/)
 * 3 respuestas
 * 2 participantes
 * Última respuesta de: [lutijimenez](https://es.wordpress.org/support/users/lutijimenez/)
 * Última actividad: [hace 11 años, 1 mes](https://es.wordpress.org/support/topic/menu-desplegable-blackbird/#post-40534)
 * Estado: resuelto

## Debates

### Debates populares

### Debates sin respuestas

### Debates que no son soporte

### Debates resueltos

### Debates no resueltos

### Todos los debates