Cómo crear un menú fijo en expansión al pasar el mouse con Divi

Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño de Divi en curso, le mostraremos cómo crear un menú fijo en expansión al pasar el mouse usando el Paquete de diseño mecánico de Divi. Manejaremos dos ejemplos de diseño diferentes que puede recrear desde cero y aplicar a cualquier tipo de sitio web que esté creando. El menú se mostrará al pasar el mouse en los tamaños de pantalla del escritorio y se activará al hacer clic en los dispositivos móviles.

¡Hagámoslo!

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 la navegación fija

Vaya 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 en expansión 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 las opciones de tema de Divi.

Deshabilitar la navegación fija

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

• Barra de navegación fija: deshabilitada

Ocultar barra de menú principal en la página

Abrir configuración de página

Vaya a la página a la que desea agregar el menú adhesivo expandible 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.

#main-header {
display: none;
}

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 acolchado superior e inferior personalizado.

• Relleno superior: 0px
• Acolchado 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 de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

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

Elemento principal

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

bottom: 0px;
position: fixed;

Índice Z

Y nos aseguraremos de que la fila (y el módulo de texto que agreguemos 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. Pegue las siguientes líneas de código CSS dentro del módulo:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

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 enfocarnos en los dos ejemplos de diseño diferentes, ¡comenzando con 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ú'. Entonces, colocamos todos los elementos del menú en una lista desordenada. También agregaremos 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

Colocar el cursor sobre el color de fondo

Modifica 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 de texto: Khand
• Peso de la fuente del 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

Configuración del texto del 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 predeterminada de texto de lista

Vaya a la configuración de texto de la lista predeterminada y modifíquela como desee. Asegúrate de usar '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 desordenado: 0px
• Altura de línea de lista desordenada: 0em
• Posición de estilo de lista desordenada: Interior

Configuración del 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 desordenado: 2vh
• Altura de línea desordenada: 2.1em

Espaciado predeterminado

Vaya a la configuración de espaciado a continuación y dé 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

Continúe con 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 dando al módulo algo de profundidad usando una sombra de cuadro. Esto asegurará que el menú no pase desapercibido en la página.

• Fuerza de desenfoque de sombra de caja: 1000 ms
• Color de sombra: rgba (0,0,0,0.68)

Clase CSS

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

• Clase CSS: dt-menu

Transiciones

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

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

Recrear el ejemplo n. ° 2

Agregar módulo de texto a la columna

Agregar contenido

¡Pasemos al segundo ejemplo! Aquí, nuevamente vamos a agregar '≡ 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

Colocar el cursor sobre el color de fondo

Modifica 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 de 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

Configuración del texto del enlace

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

• Color del texto del enlace: #ffffff

Configuración predeterminada de texto de lista

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 desordenado: 0px
• Altura de línea de lista desordenada: 0em
• Posición de estilo de lista desordenada: Interior

Configuración del texto de la lista flotante

Y modifique algunos de estos valores al pasar el mouse.

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

Espaciado predeterminado

Luego, vaya a la configuración de espaciado y déle algo de espacio al módulo.

• Margen derecho: 88vw (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

Frontera

Y para crear este diseño de un 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 caja: 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-menu

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: 100 ms

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 en expansión 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é disfrutando de esta iniciativa de diseño de Divi en curso, en la que intentamos poner algo extra en su caja de herramientas de diseño todas las semanas. 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.