homefinance blog
En el pasado, hemos compartido diferentes tipos de encabezados que puede crear con Div Div y Temer Builder. De hecho, puede encontrar todos estos tutoriales enumerados en esta publicación de navegación. En esta publicación, notará que le he mostrado cómo crear un encabezado de pantalla completa, pero para ayudarlo a continuar con el diseño del encabezado, le mostraremos cómo crear un menú de hamburguesas personalizado. Hay algunas cosas notables sobre el menú de hamburguesas que crearemos:
Tan pronto como los visitantes hacen clic en el icono de la hamburguesa, pasará un encabezado de pantalla completa, y cada elemento de menú revelará uno por uno, dándole un aspecto y sensación personalizados.
Las animaciones personalizadas se activan cada vez que el menú está abierto
También podrá agregar elementos de caída a los elementos del menú principal, se abren y hacen clic automáticamente tan pronto como alguien cierre el menú o haga clic en un elemento de navegación
En otras palabras, este es definitivamente un tutorial de encabezado que lo ayudará a agregar ese aspecto avanzado a su sitio web. ¡Puede estilizar los elementos de todos modos que desee y podrá descargar el archivo de plantilla JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Descargue el encabezado global de forma gratuita para poner su mano en la plantilla Global de encabezado gratuita, primero los descargará 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 se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los 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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree una nueva plantilla de acceso de encabezado Acceso a Div Theme Builder y agregue una nueva plantilla de encabezado global accediendo a Div Div Theme Builder. Uno, agregue un nuevo encabezado global.
Comience a construir desde cero y comience a construir el diseño del encabezado desde cero.
2. Cree el fondo de configuración del icono de logotipo y hamburguesas una vez en el editor de plantillas, comenzaremos construyendo el logotipo y el icono de Hamburger. Notarás que ya hay una sección allí. Abra la configuración de la sección y aplique un color de fondo transparente. Fondo: RGBA (255,255,255.0)
Espacio ir a la pestaña de diseño de la sección y eliminar todos los rellenos predeterminados e inferiores.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Posición luego vaya a avanzar y gire la sección fija.
Posición: fijo
Ubicación: superior izquierda
IND ÍNDICE: 13
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila, pase a la pestaña de diseño y modifique la configuración de tamaño en consecuencia:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 95%
Ancho máximo: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
El elemento CSS principal y para garantizar que tanto el logotipo como el icono de la hamburguesa aparezcan uno al lado del otro en las dimensiones de pantalla más pequeñas, insertaremos una línea de código CSS en el elemento principal de la fila. Pantalla: Flex;
Agregue el módulo de imagen a la columna 1 Cargue el logotipo es hora de agregar módulos, comenzando con un módulo de imagen en la columna 1. Cargue un logotipo a su elección.
Dimensión Vaya a la pestaña Diseño y cambie la configuración de tamaño adicional.
Ancho máximo:
Escritorio: 80 PX
Tableta y teléfono: 50 px
Posición luego reposicione todo el módulo. Posición: Absoluto
Ubicación: superior izquierda
Brecha vertical: 20 px
Agregue un módulo de texto a la estructura HTML de la columna 3 al cuadro de contenido en la tercera columna, agregaremos un módulo de texto. Usaremos este módulo de texto para crear el icono de nuestra hamburguesa. Comience cambiando a la pestaña de texto en el cuadro de contenido e ingrese las siguientes etiquetas HTML:
Dimensión luego cambie la configuración del tamaño del módulo.
Ancho: 80 PX
Altura: 80 PX
El espacio luego aplique valores de llenado personalizados en diferentes tamaños de pantalla.
Revestimiento superior:
Escritorio: 10 PX
Tableta y teléfono: 17 PX
Levante inferior:
Escritorio: 10 PX
Tableta y teléfono: 17 PX
Forro izquierdo:
Escritorio: 15 PX
Tableta y teléfono: 30 px
Junta derecha:
Escritorio: 15 PX
Tableta y teléfono: 10 px
Posicione reposicione este módulo también.
Posición: Absoluto
Ubicación: esquina superior izquierda
3. Construya el menú de hamburguesas Agregue un nuevo fondo de gradiente ahora que tenemos el logotipo de la hamburguesa y el ícono en su lugar, podemos pasar a la siguiente parte dedicada a la construcción del menú de hamburguesas y todos sus elementos. Comience agregando una nueva sección, abra la configuración de la sección y aplique un fondo de gradiente.
Color 1: # 000000
Color 2: # 111111
Tipo de gradiente: lineal
Dirección de gradiente: 90 grados
Posición inicial: 50%
Posición final: 50%
Dimensión Aplique una altura mínima y una altura máxima a la siguiente configuración de tamaño.
Altura mínima: 100 VH
Altura máxima: 100 VHSPARACIÓN ENTONCES, elimine todo el revestimiento predeterminado e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Derrames y desbordamientos muertos.
Desbordamiento horizontal: oculto
Desbordamiento vertical: Auto
Posición Para garantizar que el menú se pueda abrir en cualquier momento, reposicionaremos la sección en la pestaña avanzada.
Posición: fijo
Centro de ubicación de arriba
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila, pase a la pestaña de diseño y modifique la configuración de tamaño de la siguiente manera:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Externas entonces, vaya a la pestaña avanzada y cambie sus desbordamientos.
Desbordamiento horizontal: oculto
Desbordamiento vertical: Auto
Repose de posición y giro.
Posición: Absoluto
Centro de ubicación de arriba
Configuración de la columna 1 Espacio Luego, abriremos la configuración de la columna 1 de nuestra fila y aplicaremos algunos valores de llenado adaptables.
Revestimiento superior:
Escritorio: 24VH
Tableta y teléfono: 10 VH
Levante inferior:
Escritorio: 24VH
Tableta y teléfono: 5vh
ENLIZACIÓN IZQUIERDA: 13%
Revestimiento derecho: 13%
Border aplicaremos algunas configuraciones de borde:
El ancho del borde recto:
Escritorio: 2 PX
Tableta y teléfono: 0px \ Right -BerrerLines: # 191919
El ancho del borde inferior:
Escritorio: 0 PX
Tableta y teléfono: 2 PX
Color de borde derecho: # 191919
Configuración de la columna 2 Espacio Luego, pasaremos a la columna 2 y aplicaremos algunos valores de llenado personalizados. Habitación más alta:
Escritorio: 24VH
Tableta y teléfono: 5vh
Levante inferior:
Escritorio: 24VH
Tableta y teléfono: 5vh
ENLIZACIÓN IZQUIERDA: 13%
Revestimiento derecho: 13%
Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido H3 es hora de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Agregue el contenido H3 a su elección.
Configuración de texto H3 Cambiar a la pestaña Diseño y cambiar la configuración de texto H3 de la siguiente manera:
3 Fuentes de fuentes: Montserrat
Título 3 Peso de fuente: Ultra Bold
Título 3 Estilo de fuente: mayúscula
Frup 3 color de texto: #ffffff
El texto de 3 tamaños de encabezado
Escritorio: 1VW
Tableta: 2.5VW
Teléfono: 3.5VW
Rúbrica 3 Espaciación de litros: 5 PX
Espacio agregue algunos bordes inferiores.
Margen inferior: 5VH
Clone el módulo de texto y coloque el duplicado en la columna 2 Después de haber completado este primer módulo, puede clonarlo una vez y colocar el duplicado en la columna 2.
Cambie el contenido para asegurarse de cambiar el contenido de este módulo duplicado.
Agregue el módulo de texto no. 2 En la estructura de la columna 2 HTML en el cuadro de contenido para presentar nuestros elementos de menú, incluidos los elementos submenú, utilizaremos la pestaña Texto de un nuevo módulo de texto. Continúe y agregue un nuevo módulo de texto en la columna 1 e ingrese el siguiente html: 01 – servicios +
diseño web
marca
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:
Texto de fuente: Montserrat
El peso de la fuente de texto: delgado
Color de texto: #ffffff
Tamano del texto:
Escritorio: 2.7VW
Tableta: 4VW
Teléfono: 6VW
Texto de la carta de espacio: 0.1em
La altura de la línea de texto: 1em
Configuración del enlace de texto Cambiar y el color del texto del enlace.
Color de texto Lin: #ffffff
Configuración de texto de la lista desordenada Entonces, cambie la configuración del texto de la lista desordenada.
FUNT LISTA UNORDINADA: Montserrat
El peso de la fuente en la lista desordenada: Bold
Estilo de fuentes de lista inordinada: mayúsculas
Tamaño de texto desordenado:
Escritorio: 1VW
Tableta: 2.5VW
Teléfono: 3.5VW
Lista de altura Línea desordenada: 1.5em
Tipo de estilo de lista desordenado: ninguno
La posición del estilo de la lista no ordinaria: dentro
Espacio y complete la configuración del módulo agregando algunos rellenos personalizados en la parte superior e inferior.
Revestimiento superior: 5%
Finamiento inferior: 5%
Clone El módulo de texto para crear variaciones libres de submenú Después de haber completado el primer módulo, puede clonarlo una vez. Utilizaremos esta duplicación para crear una variante del elemento de menú sin elementos submenú.
Elimine el submenú y cambie el icono para convertir este módulo duplicado en un elemento de menú ordinario sin elementos submenú, use esta estructura html: 03- Contacto
Reutilice ambos tipos de elementos de menú Después de tener ambas variantes de los elementos del menú en su lugar, puede reutilizarlos correctamente, clonando y cambiando el contenido. 2 En la columna 2 Agregue el contenido H4 y el párrafo al cuadro de contenido en la columna 2, agregaremos otro módulo de texto con un contenido H4 y un párrafo de su elección.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:
Texto de fuente: Alesa
Color de texto: #ECECECE
Tamano del texto:
Escritorio: 0.8VW
Tableta: 2.4VW
Teléfono: 3.4VW
Texto de la carta de espacio: 1 PX
La altura de la línea de texto: 1.5em
Color de texto: Abierto
H4 Configuración de texto Cambio y configuración de texto H4.
Título 4 Dimensión de texto:
Escritorio: 1VW
Tableta: 3VW
Teléfono: 4VW
Dimensión luego cambie el ancho del módulo en la configuración de tamaño.
Ancho: 48%
Elemento CSS principal y agregue una línea de código CSS al elemento principal del módulo. Esta línea de código CSS nos ayudará a colocar dos módulos de texto uno al lado del otro. Pantalla: bloque en línea;
Clon el módulo de texto no. 2 Copiar cambio Después de haber completado el módulo de texto, puede clonarlo una vez y puede cambiar el contenido en consecuencia.
Agregue el módulo de seguimiento de las redes sociales a la columna 2 Agregue las redes sociales de su elección El último módulo que necesitamos en este diseño es un módulo de seguimiento social en la columna 2. Agregue las redes sociales de su elección.
Elimine individualmente el color de fondo de cada red social Elimine el color de fondo de cada red social individual.
Espacio entonces, regrese a la configuración general del módulo y aplique un margen más alto.
Margen superior: 5VH
4. Agregue la funcionalidad Agregue la clase CSS al módulo de texto con el icono de la hamburguesa ahora, después de que se haya construido el diseño del menú de hamburguesas, ¡ahora podemos centrarnos en agregar funcionalidad! Lo primero que debe hacer es abrir el módulo de texto que contiene el icono de la hamburguesa y agregar la siguiente clase CSS: CSS: FullWidth-Open
Agregue la clase CSS a la sección # 2 y luego abra la sección del menú de hamburguesas, la sección # 2 y agregue la siguiente clase CSS:
Clase CSS: menú de ancho completo
Agregue la clase CSS a cada módulo en el menú de ancho completo para crear el efecto de animación personalizado, debemos aplicar la siguiente clase CSS a cada módulo en la sección # 2.
Clase CSS: efecto de liquidación
Agregue una clase CSS adicional a los elementos del menú Agregue una clase CSS adicional, llamada “escritura principal”, a cada uno de los elementos del menú en la columna 1.
Clase CSS: elemento del menú principal con efecto asombroso
Agregue un módulo de código a la sección # 1 para aplicar la funcionalidad, utilizaremos el código CSS y JQuey personalizado. Colocaremos este código en un nuevo módulo de código en la segunda columna de nuestra fila en la Sección # 1.
Ingrese el código CSS Agregue el siguiente código CSS al módulo de código entre las etiquetas de estilo, como puede ver en la pantalla de impresión a continuación. / * Habilitar la clase a continuación una vez que haya terminado de editar el menú */
/*
.fullwidth-Menu {
Opacidad: 0;
Arriba: 0VH;
Visibilidad: oculto;
}
*/
.línea {
Bloqueo de pantalla;
Posición: Absoluto;
Altura: 3px;
Ancho: 100%;
Antecedentes: #000;
Opacidad: 1;
-Webkit-transition: .1s Fase-Out;
-Moz-Transition: .1s Fase-in;
-O-transición: .1s Facilifique;
Transición: .1s Fase-In;}
.Fullwidth-open.open .line {
fondo: blanco;
}
.línea 1 {
Arriba: 15px;
}
.línea 2 {
Arriba: 25px;
Ancho: 80%;
}
.línea 3 {
Arriba: 35px;
Ancho: 50%;
}
.Fullwidth-open.open .line-1 {
Arriba: 25px;
-Webkit-transform: rotado (135deg);
-Moz-transform: rotado (135deg);
-O-transform: rotado (135deg);
Transformación: rotado (135deg);
}
.Fullwidth-open.open .line-2 {
Pantalla: ninguno;
}
.Fullwidth-open.open .line-3 {
Arriba: 25px;
Ancho: 100%;
-Webkit-transform: rotado (-135deg);
-Moz-transform: rotado (-135deg);
-o-transform: rotado (-135deg);
Transformación: rotado (-135deg);
}
.Fullwidth-Menu-open {
Opacidad: 1! IMPORTANTE;
Arriba: 0! IMPORTANTE;
Visibilidad: ¡Visible! Importante;
}
.fullwidth-Menu {
-WebKit-Transition: ¡todas las 0.5s facilitadas!
-Moz-Transition: ¡todos los 0.5s facilitados!
-O-transición: ¡todas las 0.5 sencillas! Importantes;
-Ms-Transition: ¡todos los 0.5s facilitados!
Transición: ¡todos los 0.5 sencillas! Importantes;
}
.Main-Menu-Printmul {
Pantalla: ninguno;
Relleno: 0;
margen-top: 50px;
}
.Togle-Sub-Menu {
Cursor: puntero;
}
Ingrese la biblioteca Anime.js Continúe agregando la biblioteca de anime JavaScript usando etiquetas de script, como puede ver en la pantalla de impresión a continuación. Usaremos esta maravillosa biblioteca para crear el asombroso efecto en el siguiente paso del tutorial.
Src = ”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”
Escriba el código jQuery que las características de clic en nuestro menú de hamburguesas son alimentadas por el siguiente código jQuery. Asegúrese de colocar este código entre las etiquetas de script como puede ver en la pantalla de impresión a continuación. JQuery (function ($) {
$ (documento) .Ready (function () {
// Todas las variables necesarias en las funciones
VAR Menusection = $ (‘. FullWidth-Menu’); var hamburgericon = $ (‘. Fullwidth-open’);
Var menulink = $ (‘. Fullwidth-Menu a’);
lima submenu = $ (‘. Main-Menu-Printm ul’);
Var togleicon = $ (‘. Togle-Sub-Menu’);
// Abrir el menú de ancho completo y los elementos de animación
hamburgericon.click (function () {
$ (this) .togglecass (‘abierto’);
Menusection.Toglecass (‘Fullwidth-Menu-Open’);
If (menusection.hasclass (“Fullwidth-Menu”)) {
anime ({
Objetivos: ‘.Spagger-Effect’,
Traducido: [150, 0],
Opacidad: [0, 1],
Bucle: falso,
Retraso: Anime.stagger (100, {Easing: ‘facilitquad’})
});
} más {
submenu.slideUp ();
togleicon.text ($ (this) .Text () == ‘+’? ‘-‘: ‘+’);
}
});
// Cerrar el menú de ancho completo al hacer clic en un elemento
Menulink.click (function () {
Hamburgericon.toglecLass (‘abierto’);
Menusection.Toglecass (‘Fullwidth-Menu-Open’);
submenu.slideUp ();
togleicon.text ($ (this) .Text () == ‘+’? ‘-‘: ‘+’);
});
// Cambiar icono al alternar el submenú
toggleicon.click (function () {
lima submenu = $ (this) .Parent (). Find (“ul”);
submenu.slideTogle ();
$ (this) .Text ($ (this) .Text () == ‘-‘? ‘+’: ‘-‘);
});
});
});
Active la clase CSS tan pronto como haya completado el diseño en la pantalla completa, pero no menos importante, activaremos una clase CSS en el módulo de código que puede encontrar en la primera sección. Abra el módulo de código y elimine ” / * * /” al comienzo y al final de la clase. La activación de esta clase (en combinación con un código jquey ya activado) asegurará que la sección que contenga elementos de menú no cobre inmediatamente cuando alguien visita una de las páginas. Después de activar esta clase, la segunda sección en su página desaparecerá de Visual Builder, pero aún puede acceder a ella en modo de estructura alámbrica o deshabilitar la clase CSS si desea realizar cambios adicionales. ¡Guarde los cambios del encabezado y el constructor de temas que es! ¡Lo único que queda por hacer es guardar la plantilla y dividir el constructor de temas y ver el resultado en su sitio web!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
