Tutorial para un Menú móvil desplegable en WordPress

May 16, 2022 | Tutoriales, WordPress

Tabla de Contenidos

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.

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.

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ú.

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

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

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!

Síguenos en Facebook

Categorías

Publicaciones Recientes

Galería

Como borrar/bloquear comentarios spam en Blogs en WordPress

May 16, 2022 | Tutoriales, WordPress

Borrar/Bloquear comentarios spam en Blogs en WordPressUno de los problemas mas frecuentes en los blogs en la cantidad masiva de spam que podemos...

Como Optimizar Imágenes en WordPress

May 11, 2022 | Tutoriales, WordPress

Como Optimizar Imágenes en WordPressSin imágenes, la mayor parte de los sitios web se verían como interminables bloques de escrito. Para capturar la...