Cómo crear un menú fijo desplegable al pasar el mouse con Divi

Avance

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

Ejemplo 1

Escritorio

Móvil

Ejemplo #2

Escritorio

Móvil

Pasos generales

Deshabilitar navegación fija

Ir a Opciones de tema Divi

Comenzaremos con algunos pasos generales. Estos pasos son los mismos para ambos ejemplos y son necesarios para lograr el resultado deseado.

Si planea usar un menú fijo expandible en la parte inferior de su página, es posible que desee omitir la barra de menú principal en la parte superior. Para hacer eso, deberá ir a Divi y sus opciones de tema.

Deshabilitar navegación fija

Allí, querrá desactivar la opción de barra de navegación fija para asegurarse de que no quede espacio en la parte superior de su página.

• Barra de navegación fija: deshabilitada

Ocultar barra de menú principal en la página

Configuración de la página abierta

Pase a la página a la que desea agregar el menú fijo desplegable y abra la configuración de la página.

Agregar CSS personalizado

Oculte el menú principal agregando las siguientes líneas de código CSS a su página.

Agregar nueva sección al final de la página

Cualquiera que sea el ejemplo que desee recrear, algunos de los pasos básicos siguen siendo los mismos. El primer paso es agregar una sección regular al final de la página.

Espaciado

Abra la configuración de la sección y elimine todo el relleno superior e inferior personalizado.

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

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

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ón personalizado: Sí
• Ancho del canalón: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

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

Elemento principal

Estamos permitiendo que toda la fila se adhiera a la parte inferior de nuestra página agregando dos líneas individuales de código CSS al elemento principal de la fila.

Índice Z

Y nos aseguraremos de que la fila (y el módulo de texto que agregamos en los próximos pasos) permanezca en la parte superior de todo el contenido de la página aumentando el índice Z en la configuración de visibilidad de la fila.

• Índice Z: 99

Agregar módulo de código a la columna

Agregar código CSS entre etiquetas de estilo

La última parte de los pasos generales es agregar un módulo de código a la nueva fila. El código CSS que agregamos dentro de este módulo de código nos ayudará a lograr el efecto revelador al pasar el mouse por encima. Pegue las siguientes líneas de código CSS dentro del módulo:

Recrear el ejemplo n.º 1

Agregar módulo de texto a la columna

Agregar contenido

Ahora que hemos seguido todos los pasos, podemos comenzar a centrarnos en los dos ejemplos de diseño diferentes, ¡empezando por el primero! Agregue un módulo de texto a la columna de su fila. En el cuadro de contenido, estamos usando el estilo de párrafo para mostrar la copia ‘≡ Menú’. Estamos, entonces, colocando todos los elementos del menú en una lista desordenada. También añadiremos un enlace a cada uno de los títulos de página individualmente.

Color de fondo predeterminado

Pase a la configuración de fondo del módulo y cambie el color de fondo.

• Color de fondo: #ffffff

Color de fondo flotante

Modifique este color de fondo al pasar el mouse.

• Color de fondo: rgba(255,255,255,0.83)

Fondo degradado

Y agregue un fondo degradado predeterminado también.

• Color 1: rgba(255.255.255,0)
• Color 2: #ffffff
• Posición final: 60%

Configuración de texto predeterminada

Continúe yendo a la pestaña de diseño y modificando la configuración del texto.

• Fuente del texto: Khand
• Peso de fuente de texto: Negrita
• Color del texto: #021827
• Tamaño del texto: 3vh
• Orientación del texto: Centro

Configuración de texto flotante

Modifique algunas de las configuraciones de texto al pasar el mouse.

• Color del texto: rgba(255,255,255,0)
• Tamaño del texto: 0vh

Ajustes de texto de enlace

Luego, vaya a la configuración del texto del enlace y cambie el color del texto del enlace.

• Color del texto del enlace: #000000

Configuración de texto de lista predeterminada

Pase a la configuración de texto de la lista predeterminada y diseñe como desee. Asegúrese de estar usando ‘0px’ para el tamaño del texto en su estado predeterminado.

• Fuente de lista desordenada: Khand
• Estilo de fuente de lista desordenada: Mayúsculas
• Alineación de texto de lista desordenada: Centro
• Color de texto de lista desordenada: rgba(255,255,255,0)
• Tamaño de texto de lista desordenada: 0px
• Altura de línea de lista desordenada: 0em
• Posición de estilo de lista desordenada: interior

Configuración de texto de la lista flotante

Luego, modifique algunos de los valores al pasar el mouse para permitir que aparezcan los elementos del menú.

• Color de texto de lista desordenada: #000000
• Tamaño de texto de lista desordenada: 2vh
• Altura de línea desordenada: 2,1 em

Espaciado predeterminado

Ve a la configuración de espaciado a continuación y dale una forma al módulo de texto.

• Margen izquierdo: 45vw (escritorio), 39vw (tableta), 33vw (teléfono)
• Margen derecho: 45vw (escritorio), 39vw (tableta), 33vw (teléfono)
• Acolchado superior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
• Acolchado inferior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)

Espaciado de desplazamiento

Modifique estos mismos valores al pasar el mouse.

• Margen izquierdo: 14vw
• Margen derecho: 14vw
• Acolchado superior: 8vw
• Acolchado inferior: 8vw

Borde predeterminado

Pase a la configuración del borde y asegúrese de que cada una de las esquinas redondeadas tenga un valor de ‘0px’.

Borde flotante

Habilite las opciones de desplazamiento en las esquinas redondeadas y cambie los valores superior izquierdo y superior derecho.

• Arriba a la izquierda: 50vw
• Arriba a la derecha: 50vw

Sombra de la caja

Continúe dándole al módulo algo de profundidad usando una sombra de caja. Esto asegurará que el menú no pase desapercibido en la página.

• Fuerza de desenfoque de sombra de cuadro: 1000ms
• Color de sombra: rgba (0,0,0,0,68)

Clase CSS

También estamos agregando una clase CSS al módulo.

• Clase CSS: dt-menú

Transiciones

Por último, pero no menos importante, reduzca la duración de la transición en la configuración de transiciones.

• Duración de la transición: 100ms

Recrear el Ejemplo #2

Agregar módulo de texto a la columna

Agregar contenido

¡Vamos al segundo ejemplo! Aquí, agregaremos nuevamente ‘≡ Menú’ usando el estilo de texto de párrafo y los elementos del menú usando una lista desordenada. También agregaremos un enlace a cada uno de los elementos del menú individualmente.

Color de fondo predeterminado

Pase a la configuración de fondo y cambie el color de fondo.

• Color de fondo: #ffffff

Color de fondo flotante

Modifique el color de fondo al pasar el mouse.

• Color de fondo: #f71535

Configuración de texto predeterminada

Luego, vaya a la pestaña de diseño y realice algunos cambios en la apariencia de la copia del párrafo.

• Fuente del texto: Khand
• Color del texto: #021827
• Tamaño del texto: 3vh

Configuración de texto flotante

Modifique esta configuración al pasar el mouse.

• Color del texto: rgba(255,255,255,0)
• Tamaño del texto: 0vh

Ajustes de texto de enlace

Pase a la configuración de texto y cambie el color del texto del enlace.

• Color del texto del enlace: #ffffff

Configuración de texto de lista predeterminada

Cambie también la configuración de diseño de los elementos de la lista desordenada.

• Fuente de lista desordenada: Khand
• Estilo de fuente de lista desordenada: Mayúsculas
• Alineación de texto de lista desordenada: Centro
• Color de texto de lista desordenada: rgba(255,255,255,0)
• Tamaño de texto de lista desordenada: 0px
• Altura de línea de lista desordenada: 0em
• Posición de estilo de lista desordenada: interior

Configuración de texto de la lista flotante

Y modifique algunos de estos valores al pasar el mouse.

• Color de texto de lista desordenada: #ffffff
• Tamaño de texto de lista desordenada: 2vh
• Altura de línea de lista desordenada: 2,1 em

Espaciado predeterminado

Luego, ve a la configuración de espaciado y dale algo de espacio al módulo.

• Margen derecho: 88vw (computadora de escritorio y tableta), 71vw (teléfono)
• Acolchado superior: 6vw (escritorio), 10vw (tableta), 18vw (teléfono)
• Acolchado inferior: 4vw (escritorio), 10vw (tableta), 12vw (teléfono)
• Acolchado izquierdo: 1vw

Espaciado de desplazamiento

Modifique los valores al pasar el mouse.

• Margen Derecho: 59vw
• Acolchado superior: 13vw
• Acolchado inferior: 8vw
• Acolchado izquierdo: 1vw
• Acolchado derecho: 13vw

Borde

Y para crear este diseño de cuarto de círculo, vamos a cambiar el borde superior derecho en la configuración del borde.

• Arriba a la derecha: 50vw

Sombra de la caja

También agregaremos una sombra de cuadro para crear profundidad en la página.

• Fuerza de desenfoque de sombra de cuadro: 1000px
• Color de sombra: rgba (0,0,0,0,68)

Clase CSS

Luego, agregaremos una clase CSS en la pestaña avanzada.

• Clase CSS: dt-menú

Transiciones

Y disminuya la duración de la transición en la pestaña avanzada para crear una transición rápida.

• Duración de la transición: 100ms

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Ejemplo 1

Escritorio

Móvil

Ejemplo #2

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear un menú fijo expandible usando el paquete de diseño mecánico de Divi . ¡Hemos manejado dos ejemplos de diseño diferentes que puede recrear y usar en cualquier tipo de sitio web que esté creando! Esperamos que estés disfrutando de esta iniciativa de diseño Divi en curso, en la que tratamos de poner algo extra en tu caja de herramientas de diseño cada semana. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.