Un botón de menú de caída puede ser muy útil al diseñar un sitio web. Además del menú principal, hay áreas en un sitio que pueden requerir un menú de caída. Los vemos usados ​​para cosas como categorías de publicaciones de blog, listas y entradas de formularios. Pero se pueden usar incluso para un llamado principal a la acción. En este tutorial, le mostraremos cómo crear un botón de menú desplegable usando el módulo de menú de ancho completo. Para hacer esto, primero crearemos un menú en WordPress. Luego usaremos el módulo de menú del ancho completo de la división para mostrar ese menú con estilos personalizados utilizando el Builder Divi y un poco de CSS personalizado. El resultado es un botón de menú de caída, que es práctico y elegante.
Vamos a empezar. Tire de la vista con un vistazo rápido al botón Drop -Down, construiremos en este tutorial. Desktop (el menú se mueve en el flotador)

Tableta y teléfono (el menú se abre para hacer clic)

Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Suscríbase a nuestro canal de YouTube para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en el constructor. El CSS personalizado se ha agregado a un módulo de código en una sección separada en la parte inferior del aspecto. Pasemos al tutorial, ¿no? Lo que debe comenzar a comenzar, si aún no lo ha hecho, instale y active el tema de la Divica Instalado (o el Builder Divi Plugin si no usa el tema Div). Usaremos el Builder Divi desde el frente para diseñar el botón Menú de caída. ¡Eso es todo! Creando un menú en WordPress antes de comenzar a construir el menú Divic Builder, primero debemos crear un menú de WordPress que nos gustaría usar para el módulo de menú de ancho completo. Para hacer esto, vaya al tablero de WordPress y navegue por los menús. Luego cree un nuevo menú haciendo clic en el enlace de creación de un nuevo menú, ingresando un nombre de menú y haciendo clic en el botón “Crear menú”.
Por ahora, puede crear algunos enlaces personalizados con “#” como sustituto de URL junto con el texto del enlace. Estructura los elementos del menú para que el elemento de menú de nivel superior tenga el texto del enlace “Aprenda más” con tres elementos submenú debajo. Después de eso, asegúrese de guardar el menú. Cómo crear un botón de menú desplegable con el módulo de menú Div FullWidth Div Una vez que se crea el menú, podemos comenzar a diseñar el botón de menú Divic. Para comenzar las cosas, cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).

Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Creando el contenido falso primero, agregue una fila con una columna a la sección predeterminada habitual. Agregue un módulo de texto y luego agregue un módulo de texto en una fila con el siguiente contenido:

Botón de menú desplegable

Tu contenido va aquí. Editar o eliminar este texto en línea o en la configuración del contenido del módulo. También puede diseñar todos los aspectos de este contenido en la configuración de diseño del módulo e incluso aplicar la costumbre a este texto en la configuración avanzada del módulo.
Después de eso, actualice la configuración de diseño de la siguiente manera:
La sección de revestimiento luego, actualice la configuración de la sección con la siguiente:
Forro: 0px hacia abajo
Espacio y borde de la fila Después de actualizar la sección de llenado, abra la configuración de la fila y déle al giro algunos rellenos y un borde ligero.
Forro: 10 VW hacia arriba, 10 VW hacia abajo, 5 VW a la izquierda, 5VW a la derecha

Ancho fronterizo: 1 PX
Creando el botón Menú desplegable Para crear el botón desplegable, utilizaremos un módulo de menú de ancho completo. Esto nos permitirá agregar el menú que creamos anteriormente. Agregando el menú de ancho completo para crear el módulo de menú de ancho completo, agregue una nueva sección de ancho completo a la sección actual habitual. Luego agregue un módulo de menú de ancho completo en una fila.
En la configuración de ventana emergente, el menú de ancho completo (en contenido), use el menú desplegable para seleccionar el menú que desea mostrar. Este debería ser el mismo menú que creé anteriormente llamado “Menú del botón desplegable”. Luego retire el color de fondo blanco predeterminado.

Después de haber agregado el menú con el módulo de menú de ancho completo, guarde la configuración. Volveremos un poco a este módulo para terminar el diseño. Pero por ahora, agregaremos un fondo a la sección de ancho completo.

Actualice el diseño de la sección de ancho completo Abra la configuración de configuración completa y actualice lo siguiente:

Color izquierdo del gradiente de fondo: # 0047D6

Color derecho del gradiente de fondo: # 45b2ff

Ancho máximo: 240 PX
Alineación de la sección: Centro
Establecí el ancho máximo de la sección en 240 PX, ya que esto se ajustará al ancho del menú desplegable predeterminado. También es un tamaño hermoso para un botón en el escritorio y el móvil.

Esquinas redondeadas: 5 px
En la pestaña avanzada, agregue las siguientes clases de CSS, adelantamiento e índice Z.
Clase CSS: botón decantado

Desbordamiento horizontal: visible

Desbordamiento vertical: visible
IND ÍNDICE: 14
La clase CSS es necesaria para dirigir nuestro CSS externo a esta sección solo más tarde. El desbordamiento debe configurarse en la visible para que podamos ver el menú de caída. Y el índice z lo ayudará a mantener el menú de caída en la parte superior de cualquier otro contenido en la página. Apropiado el menú FulWidth ahora estamos listos para diseñar el módulo de menú completo. Abra la configuración del módulo de ancho de setTime y actualice lo siguiente:
Crear enlaces de menú Ancho completo: Sí
Texto del menú desplegable: #fffff
El color del texto del menú móvil: #ffffff

Alineación de texto: Centro
El color del fondo del menú desplegable: # 45b2ff
Menú de la línea de color NEGO: #ffffff
Color de fondo del menú móvil: # 45b2ff
Fuente del menú: Codificado sin semi-condensado
El peso de la fuente del menú: semi en negrita
Color de texto del menú: #ffffff
Menú Tamaño del texto: 16 PX

Cartas de menú de espacio: 2 PX
Animación del menú de primavera: expandir
Posicionando el botón desplegable para que el botón se superponga sobre el borde inferior, necesitamos agregar un margen superior negativo exactamente a la mitad de la altura del botón.
Margen: -40.5 PX desde arriba
Casi aquí aquí está el resultado hasta ahora …
Como puede ver, el espacio de desplazamiento aún no ocupa toda el área del botón y el menú de caída aún es correcto. Para remediar esto, podemos agregar algunos CSS personalizados. Agregando CSS personalizado antes de agregar CSS personalizado, asegúrese de que tenga la identificación de “botón de gota” agregada a la sección de ancho completo (no en modo).

Sin el código CSS, el CSS a continuación no funcionará. Para agregar CSS personalizado, abra la configuración de la página y pegue el siguiente código al área de entrada CSS personalizada.
}

.dropdown-button .fullwidth-Menu li> a {

Bottom: 0px;

Línea de altura: 81px;
}
.dropdown-button .fullwidth-Menu li a {
Relleno: 6px 0px;
Línea de altura: 1.6em;
}
.dropdown-button .et_mobile_men li a: hover, .nav ul li a: hover, .dropdown-button .fullwidth-Menu a: hover {
Opacidad: 1;
}
.dropdown-button .et_pb_fullwidth_menu_ullwidth .et_pb_row {
relleno: 0 0! IMPORTANTE;
}
.dropdown-button .fullwidth-Menu li {
Bloqueo de pantalla;
}
.Dropdown-Button .fullwidth-Menu .Menu-Atem-Has-Children & gt; A: First-Child: After {
Derecha: 20px;
}
Aquí esta el resultado final
Personalización del menú en el móvil En este momento, el menú recurrirá a la versión móvil con el icono de hamburguesas que se puede hacer clic, que cambia el menú móvil abierto y cerrado. Así es como se ve.
Para remediar el menú para que coincida con la versión de escritorio, debemos agregar algunos CSS personalizados. Abra la configuración de la página y agregue los siguientes CSS personalizados justo debajo del CSS que agregué actualmente. @Media (max-width: 981px) {
.Dropdown-button .et_pb_fullwidth_menu .et_pb_row {
Ancho: 100%;

}

.Dropdown-button .mobile_men_bar {

Altura: 81px;
}
.Dropdown-button .mobile_menu_bar: antes {
Font-Family: Hereding! IMPORTANTE;
Font-peso: 600! IMPORTANTE;
Tamaño de fuente: 16px! IMPORTANTE;
Color: #ffffff! Importante;
Espaciado de letras: 2px! IMPORTANTE;
Contenido: “aprender más”;
Línea de altura: 81px;
Arriba: 0px;
}
.dropdown-button .mobile_men_bar: después {post: absoluto;
Línea de altura: 81px;
Font-Family: Etmodules;
Tamaño de fuente: 20px;
Font-peso: 800;
Contenido: “3”;
ROLDE-LEFUNTO: 20PX;
Color: #ffffff;
}
.dropdown-button .et_first_mobile_item> a {
Pantalla: ninguno;
}
}
El CSS anterior hace que el área se pueda hacer clic para estirarse en todo el ancho y la altura de la sección / botón. También reemplaza el ícono de la hamburguesa con un texto de flecha e ícono que coincide con la versión de escritorio. Esto se realiza usando pseudo-elementos: antes y: después. De esta manera, mantendremos la funcionalidad predeterminada del menú móvil. En este momento, el contenido del texto para el botón desplegable es “aprender más”. Pero podemos cambiar esto actualizando la siguiente línea CSS en el pseudo elemento: antes para la barra de menú móvil: Contenido: “Aprende más”;
Por ejemplo, si desea leer “menú”, cambiará la línea CSS con el siguiente: Contenido: “Menú”;
El resultado final aquí es el resultado final. Desktop (el menú se mueve en el flotador)
Tableta y teléfono (el menú se abre para hacer clic)
¡Sub -elementos adicionales y puede agregar incluso elementos de submenú! Simplemente actualice el menú en la página del editor del menú y estará listo.