Tutorial para un Menú móvil desplegable en WordPress

May 16, 2022 | Tutoriales, WordPress

Tutorial para un Menú móvil desplegable en WordPress

En ocasiones tenemos un menú que contiene submenús, estos en escritorio se ven de maravilla, pero cuando los visualizamos desde un dispositivo móvil se hacen muy largos, dependiendo de la cantidad de ítem que tenga el submenú, como se muestra en la siguiente imagen.

 

Menú desplegable
Como se muestra en la imagen los submenús se muestran desplegados y esta acción con menús mucho mas grandes harían que el usuario se tenga que desplazar hasta encontrar lo que este buscando.

Para solucionar esto se puede convertir este tipo de menú a un menú desplegable que nos dejara mostrar/ocultar os ítems de los submenús.

En este post te ayudaremos a convertir el menú móvil por defecto de WordPress a un menú desplegable.

 

Creando el menú
Para que el tutorial funcione se tiene que crear el menú con esta estructura, hay que ver cuales serán los niveles que estaremos ocultando en el menú desplegable.
Menú desplegable

Los niveles hacen referencia a los submenú de cada menú y el nivel 1 solo se coloca a aquel elemento que tenga un submenú.

Colocar las clases CSS a los ítems del menú

Tenemos que colocarle una clase CSS a cada uno de los ítem del menú que utilizaremos, para esto tenemos que activar la opción de clase CSS en WordPress, hacemos lo siguiente:

En la pagina del menú activamos la opción de “Opciones de pantalla” y marcamos la opción de “Clase CSS” y esto nos debería dejar colocar una clase CSS a cada uno de los ítems del menú.

Menú desplegable

Una vez echo lo anterior procederemos a colocarle las clases a los ítems del menú, en cada nivel colocaremos las siguientes clases:

  • Nivel 1 : first-level
  • Nivel 2 : second-level
  • Nivel 3 : third-level
  • Nivel 4 : fourth -level
Menú desplegable
Una vez colocadas las clases procederemos a realizar el CSS para ocultar los ítems.

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
/* Icono Inicio */
.et_mobile_menu .first-level > a:after {
font-family: ‘ETmodules’;
content: ‘\4c’;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: ‘\4d’;
}

Este fracmento de codigo se repetira dependiendo de los niveles que tengan el submenu

– Ej: Si el menu tiene el siguiete formato

Continente ————‘Nivel 1’
ㅤㅤ– America———-‘Nivel 2’
ㅤㅤㅤㅤ– México————‘Nivel 3’
ㅤㅤ– Europa ————-‘Nivel 2’
ㅤㅤㅤㅤ– España ———–‘Nivel 3’
ㅤㅤㅤㅤ– Portugal ———-‘Nivel 3’

El fractemto de codigo se repetira 2 veces para que el icono de desplegar aparesca en el nivel 1 y 2.
° Unicamente cambiara el nombre de la clase first.level a second-level

CSS para ocultar y desocultar los submenus

Si solo tiene 2 niveles se dejara igual, pero si hay 3 niveles se colocara una regla para la clase
del tercer nivel.

.second-level {
display: none;
}

.reveal-items {
display: block;
}

Código JS para los submenús
Una vez colocada todas las clases CSS a los ítem y haber agregado el CSS necesario procederemos a crear el código JS para realziar la función de ocultar y mostrar los submenús.
<script type="text/javascript">
(function($) {
    function setup_collapsible_submenus() {
        var FirstLevel = $('.et_mobile_menu .first-level > a');
        FirstLevel.off('click').click(function() {
            $(this).attr('href', '#');
            $(this).parent().children().children().toggleClass('reveal-items');
            $(this).toggleClass('icon-switch');
        });
    }
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
})(jQuery);
</script>
Esta función se repetirá dependiendo de la cantidad de niveles del submenú, si solo hay 2 niveles así bastara pero si son 3 se deberá de repetir cambiando la clase “first-level” por la correspondida
Fav-Icon-WebLab

WEBLAB.MX

Enfocados en ofrecerte siempre el sitio ideal para tu negocio y posicionarlo en los primeros resultados en las búsquedas de Google, ¡Contacta ahora mismo para conocer la estrategia adecuada para ti!

Categorías

Publicaciones Recientes

Galería

Tags

Tal vez te interese…

eCommerce

eCommerce

¿Qué es el eCommerce?El e-Commerce o comercio electrónico se trata de la actividad de comprar o vender productos de manera online. Se denomina...

leer más