Hace un tiempo, compartimos un hack de menú móvil que lo ayuda a crear un menú anidado que se colapsa. Sabemos que muchos de ustedes lo han usado, pero con el nuevo Divi Theme Builder, el enfoque se vuelve ligeramente diferente. En el tutorial de hoy, le mostraremos cómo aplicar un efecto de colapso móvil al Módulo de menú dentro del Divi Theme Builder. Hay tres partes principales en este tutorial:

  • Configurar su menú y asignar las clases correctas a sus elementos de menú
  • Construyendo su menú usando el generador de temas y el módulo de menú
  • Agregar el código personalizado dentro del generador de temas

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Móvil

menú anidado

Escritorio

menú anidado

 

1. Configure su menú

Agregar elementos de menú y elementos de submenú

Lo primero que debe hacer es crear su menú. Agregue los elementos secundarios de su elección.

menú anidado

Agregar opción de clase CSS

Una vez que haya agregado los elementos del menú, puede habilitar la opción de clases CSS haciendo clic en ‘Opciones de pantalla’ y habilitando ‘Clases CSS’.

menú anidado

Agregar clase CSS a elementos de menú de primer nivel que contienen elementos de submenú

Continúe agregando una clase CSS a los elementos de menú de primer nivel que contienen elementos de submenú. En este ejemplo, eso significa agregar la clase CSS a los elementos del menú ‘Servicio’ y ‘Portafolio’.

  • Clases CSS: primer nivel

menú anidado

Agregar clase CSS a elementos de menú de segundo nivel y guardar menú

Luego, asigne una clase CSS diferente a los elementos de menú de segundo nivel en su menú. Asegúrese de agregar esta clase CSS solo a los elementos del menú de segundo nivel (en caso de que esté agregando más niveles). Más adelante en este tutorial, utilizaremos esta clase CSS y la que hemos asignado a los elementos del menú de primer nivel para crear el menú anidado que se contrae.

  • Clases CSS: segundo nivel

menú anidado

2. Vaya a Divi Theme Builder y comience a construir el encabezado global

Ir a Divi Theme Builder

La siguiente parte de este tutorial se enfoca en crear el diseño del encabezado. Si desea que la técnica anidada se aplique a un encabezado que ya ha creado (utilizando el Módulo de menú), puede omitir este paso e ir a la última parte del tutorial. Si desea recrear el diseño, siga los pasos. Ve al Divi Theme Builder.

menú anidado

Comience a construir encabezado global

Comience a construir su encabezado global a continuación.

menú anidado

Configuraciones de sección

Espaciado

Dentro del editor de plantillas, verás una sección. Abra esa sección y elimine todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

menú anidado

Índice Z

Aumenta también el índice z de la sección.

  • Índice Z: 99999

menú anidado

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

menú anidado

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

menú anidado

Espaciado

Elimine todos los rellenos superiores e inferiores predeterminados a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

menú anidado

Elemento principal

Asegúrese de que todos los módulos aparezcan uno al lado del otro en tamaños de pantalla más pequeños agregando también una sola línea de código CSS al elemento principal de la fila.

01
display: flex;

menú anidado

Columna 1

Espaciado

Luego, abra la configuración de la columna 1 y agregue algunos rellenos superiores e inferiores personalizados.

  • Relleno superior: 20px
  • Relleno inferior: 20px

menú anidado

Frontera

Agregue también un radio de borde.

  • Arriba a la derecha: 100 px
  • Abajo a la derecha: 100 px

menú anidado

Sombra de la caja

Y complete la configuración de la columna 1 agregando una sombra de cuadro sutil.

  • Posición horizontal de la sombra de la caja: 20 px
  • Fuerza de desenfoque de sombra de caja: 50 px
  • Color de sombra: rgba (0,0,0,0.15)

menú anidado

Columna 2

Espaciado

Abra la configuración de la segunda columna a continuación y agregue un poco de relleno superior e inferior.

  • Relleno superior: 20px
  • Relleno inferior: 20px

menú anidado

Columna 3

Fondo degradado

En la siguiente y última columna. Agrega un fondo degradado.

  • Color 1: # 26c699
  • Color 2: # abe02f
  • Dirección de degradado: 116 grados

menú anidado

Espaciado

Agregue algunos rellenos superiores e inferiores personalizados a continuación.

  • Relleno superior: 20px
  • Relleno inferior: 20px

menú anidado

Frontera

Luego, vaya a la configuración del borde y realice los siguientes cambios:

  • Arriba a la izquierda: 100 px
  • Abajo a la izquierda: 100 px

menú anidado

Sombra de la caja

Complete la configuración de la columna agregando una sombra de cuadro.

  • Posición horizontal de la sombra de la caja: -26 px
  • Posición vertical de la sombra de la caja: 0px
  • Color de sombra: # d2ff0c

menú anidado

Agregar módulo de imagen a la columna 1

Subir logo

Es hora de agregar módulos, comenzando con un Módulo de imagen en la columna 1. Cargue su logotipo.

menú anidado

Alineación

Cambie la alineación de la imagen del módulo a continuación.

  • Alineación de imagen: centro

menú anidado

Dimensionamiento

Complete la configuración del módulo cambiando el ancho en diferentes tamaños de pantalla.

  • Ancho: 120 px (escritorio), 80 px (tableta y teléfono)

menú anidado

Agregar módulo de menú a la columna 2

Seleccione el menú

En la columna 2, el único módulo que necesitamos es un Módulo de menú. Seleccione el menú que ha creado en la primera parte de este tutorial.

menú anidado

Eliminar color de fondo

Elimine el color de fondo del módulo a continuación.

menú anidado

Diseño

Luego, cambie la configuración de diseño.

  • Estilo: Centrado
  • Dirección del menú desplegable: hacia abajo

menú anidado

Texto del menú

Dale estilo al texto del menú también.

  • Fuente del menú: Montserrat
  • Peso de fuente del menú: medio
  • Color del texto del menú: # 000000
  • Tamaño del texto del menú: 13 px
  • Espaciado entre letras del menú: 1px

menú anidado

Menú desplegable

Continúe cambiando algunos colores en la configuración del menú desplegable.

  • Color de fondo del menú desplegable: #ffffff
  • Color de línea del menú desplegable: # 000000

menú anidado

Íconos

Y complete la configuración del módulo cambiando el color del icono del menú de hamburguesas en la configuración de los iconos.

  • Color del icono del menú de hamburguesas: # 000000

menú anidado

Agregar módulo de texto a la columna 3

Agregar contenido

En el siguiente y último módulo, que es un módulo de texto en la columna 3. Agregue alguna copia de su elección.

menú anidado

Añadir enlace

Agregue un enlace al módulo siguiente.

  • URL del enlace del módulo: #

menú anidado

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Montserrat
  • Peso de la fuente del texto: semi negrita
  • Color del texto: #ffffff
  • Tamaño de texto: 16px
  • Altura de la línea de texto: 1em
  • Alineación de texto: centro

menú anidado

Espaciado

Complete la configuración del módulo agregando un poco de margen superior.

  • Margen superior: 10px

menú anidado

3. Agregue funcionalidad al menú usando un módulo de código

Agregar módulo de código a la columna 2

Una vez que haya completado el diseño de su encabezado, es hora de agregar el código personalizado que transformará el menú móvil en un menú anidado colapsante. Agregue un módulo de código a la segunda columna (o en cualquier otro lugar).

menú anidado

Insertar código CSS y JQuery

Luego, agregue el código CSS y JQuery. Asegúrese de colocar el código CSS entre las etiquetas de estilo y el código JQuery entre las etiquetas de script.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18 años
19
20
21
22
23
24
25
26
27
.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.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';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18 años
19
20
21
22
(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);

menú anidado

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!