Come creare un menu di hamburger con animazione sfalsata con Divi e Anime.js
Pubblicato: 2021-02-17In passato, abbiamo condiviso diversi tipi di intestazioni che puoi creare con Divi e Divi Theme Builder. In effetti, puoi trovare tutti quei tutorial elencati in questo post di navigazione. In quel post, noterai che ti abbiamo mostrato come creare un'intestazione a schermo intero, ma per aiutarti a migliorare ulteriormente il design dell'intestazione, ti mostreremo anche come creare un menu di hamburger animato personalizzato. Ci sono alcune cose degne di nota sul menu dell'hamburger che creeremo:
- Non appena i visitatori fanno clic sull'icona dell'hamburger, verrà visualizzata un'intestazione a schermo intero e ogni voce di menu verrà rivelata una per una, conferendole un aspetto animato personalizzato
- Le animazioni personalizzate vengono attivate ogni volta che si apre il menu
- Sarai in grado di aggiungere elementi a discesa anche agli elementi del menu principale, questi si aprono al clic e si chiudono automaticamente non appena qualcuno chiude il menu o fa clic su un elemento di navigazione
In altre parole, questo è sicuramente un tutorial di intestazione che ti aiuterà ad aggiungere quell'aspetto avanzato al tuo sito web. Puoi anche modellare gli elementi come preferisci e potrai scaricare gratuitamente il file modello JSON!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica il modello di intestazione globale GRATUITAMENTE
Per mettere le mani sul modello di intestazione globale gratuito, dovrai prima scaricarli utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
1. Crea un nuovo modello di intestazione
Vai a Divi Theme Builder e aggiungi un nuovo modello di intestazione globale
Inizia andando al Divi Theme Builder. Uno lì, aggiungi una nuova intestazione globale.
Inizia a costruire da zero
E inizia a creare il design dell'intestazione da zero.
2. Crea il logo e l'icona dell'hamburger
Impostazioni della sezione
Colore di sfondo
Una volta all'interno dell'editor dei modelli, inizieremo creando il logo e l'icona dell'hamburger. Noterai che c'è già una sezione lì. Apri le impostazioni della sezione e applica un colore di sfondo trasparente.
- Colore di sfondo: rgba (255,255,255,0)
Spaziatura
Passa alla scheda Design della sezione e rimuovi tutte le imbottiture superiori e inferiori predefinite.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Posizione
Quindi, vai all'avanzato e gira la sezione fissa.
- Posizione: fissa
- Posizione: in alto a sinistra
- Indice Z: 13
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Dimensionamento
Senza ancora aggiungere moduli, apri le impostazioni della riga, passa alla scheda Design e modifica le impostazioni di dimensionamento di conseguenza:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 95%
- Larghezza massima: 100%
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Elemento principale CSS
E per assicurarci che sia il logo che l'icona dell'hamburger appaiano uno accanto all'altro su schermi di dimensioni più piccole, inseriremo una riga di codice CSS nell'elemento principale della riga.
display: flex;
Aggiungi modulo immagine alla colonna 1
Carica logo
È ora di aggiungere moduli, iniziando con un modulo immagine nella colonna 1. Carica un logo a tua scelta.
Dimensionamento
Passa alla scheda Design e successivamente modifica le impostazioni di dimensionamento.
- Larghezza massima:
- Desktop: 80 pixel
- Tablet e telefono: 50px
Posizione
Quindi, riposizionare l'intero modulo.
- Posizione: Assoluta
- Posizione: in alto a sinistra
- Offset verticale: 20px
Aggiungi modulo di testo alla colonna 3
Struttura HTML nella casella del contenuto
Nella terza colonna, aggiungeremo un modulo di testo. Useremo questo modulo di testo per creare la nostra icona dell'hamburger. Inizia passando alla scheda di testo nella casella del contenuto e inserisci i seguenti tag HTML:
<span class="line line-1"></span> <span class="line line-2"></span> <span class="line line-3"></span>
Dimensionamento
Successivamente, modifica le impostazioni di dimensionamento del modulo.
- Larghezza: 80px
- Altezza: 80 px
Spaziatura
Quindi, applica valori di riempimento personalizzati su diverse dimensioni dello schermo.
- Imbottitura superiore:
- Desktop: 10px
- Tablet e telefono: 17px
- Imbottitura inferiore:
- Desktop: 10px
- Tablet e telefono: 17px
- Imbottitura sinistra:
- Desktop: 15px
- Tablet e telefono: 30px
- Imbottitura destra:
- Desktop: 15px
- Tablet e telefono: 10px
Posizione
Riposizionare anche questo modulo.
- Posizione: Assoluta
- Posizione: angolo in alto a sinistra
3. Costruisci il menu dell'hamburger
Aggiungi nuova sezione
Sfondo sfumato
Ora che abbiamo il logo e l'icona dell'hamburger in posizione, possiamo passare alla parte successiva dedicata alla creazione del menu dell'hamburger e di tutti i suoi elementi. Inizia aggiungendo una nuova sezione, apri le impostazioni della sezione e applica uno sfondo sfumato.
- Colore 1: #000000
- Colore 2: #111111
- Tipo di gradiente: lineare
- Direzione gradiente: 90 gradi
- Posizione di partenza: 50%
- Posizione finale: 50%
Dimensionamento
Applicare un'altezza minima e un'altezza massima alle impostazioni di dimensionamento successive.
- Altezza minima: 100 vh
- Altezza massima: 100 vh
Spaziatura
Quindi, rimuovi tutta l'imbottitura superiore e inferiore della sezione predefinita.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
straripamenti
Modifica anche gli overflow.
- Overflow orizzontale: nascosto
- Overflow verticale: automatico
Posizione
Per assicurarci che il menu possa essere sempre aperto, riposizioneremo la sezione nella scheda Avanzate.
- Posizione: fissa
- Posizione In alto al centro
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Dimensionamento
Senza ancora aggiungere moduli, apri le impostazioni della riga, passa alla scheda Design e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 100%
- Larghezza massima: 100%
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
straripamenti
Quindi, vai alla scheda Avanzate e modifica gli overflow.
- Overflow orizzontale: nascosto
- Overflow verticale: automatico
Posizione
Riposizionare anche la riga.
- Posizione: Assoluta
- Posizione In alto al centro
Impostazioni colonna 1
Spaziatura
Successivamente, apriremo le impostazioni della colonna 1 della nostra riga e applicheremo alcuni valori di riempimento reattivo personalizzati.
- Imbottitura superiore:
- Desktop: 24vh
- Tablet e telefono: 10 vh
- Imbottitura inferiore:
- Desktop: 24vh
- Tablet e telefono: 5vh
- Imbottitura sinistra: 13%
- Imbottitura destra: 13%
Frontiera
Applicheremo anche alcune impostazioni dei bordi:
- Larghezza bordo destro:
- Desktop: 2px
- Tablet e telefono: 0px\
- Colore bordo destro: #191919
- Larghezza bordo inferiore:
- Desktop: 0px
- Tablet e telefono: 2px
- Colore bordo destro: #191919
Impostazioni colonna 2
Spaziatura
Quindi, passeremo alla colonna 2 e applicheremo anche lì alcuni valori di riempimento personalizzati.
- Imbottitura superiore:
- Desktop: 24vh
- Tablet e telefono: 5vh
- Imbottitura inferiore:
- Desktop: 24vh
- Tablet e telefono: 5vh
- Imbottitura sinistra: 13%
- Imbottitura destra: 13%
Aggiungi il modulo di testo n. 1 alla colonna 1
Aggiungi contenuto H3
È ora di aggiungere moduli, iniziando con un primo modulo di testo nella colonna 1. Aggiungi alcuni contenuti H3 a tua scelta.
Impostazioni testo H3
Passa alla scheda Design e modifica le impostazioni del testo H3 come segue:
- Intestazione 3 Carattere: Montserrat
- Intestazione 3 Peso del carattere: Ultra grassetto
- Intestazione 3 Stile carattere: maiuscolo
- Colore testo titolo 3: #ffffff
- Intestazione 3 Dimensione del testo
- Desktop: 1vw
- Tablet: 2.5vw
- Telefono: 3.5vw
- Intestazione 3 spaziatura lettere: 5px
Spaziatura
Aggiungi un margine inferiore dopo.
- Margine inferiore: 5vh
Clona modulo testo e posiziona duplicato nella colonna 2
Una volta completato questo primo modulo, puoi clonarlo una volta e posizionare il duplicato nella colonna 2.
Modifica contenuto
Assicurati di modificare il contenuto in questo modulo duplicato.
Aggiungi il modulo di testo n. 2 alla colonna 2
Struttura HTML nella casella del contenuto
Per mostrare le nostre voci di menu, comprese le voci di sottomenu, utilizzeremo la scheda di testo di un nuovo modulo di testo. Vai avanti e aggiungi un nuovo modulo di testo alla colonna 1 e inserisci il seguente HTML:
<span style="color: #686868;">01—</span> <a href="#">Services</a> <span class="toggle-sub-menu" style="color: #ffff00;">+</span> <ul> <li><a href="#">Web design</a></li> <li><a href="#">Branding</a></li> </ul>
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:
- Carattere del testo: Montserrat
- Peso del carattere del testo: sottile
- Colore del testo: #ffffff
- Dimensione del testo:
- Desktop: 2.7vw
- Tablet: 4vw
- Telefono: 6vw
- Spaziatura delle lettere del testo: 0,1 em
- Altezza riga di testo: 1em
Link alle impostazioni del testo
Cambia anche il colore del testo del collegamento.
- Colore testo Lin: #ffffff
Impostazioni testo elenco non ordinato
Quindi, modifica le impostazioni del testo dell'elenco non ordinato.
- Carattere elenco non ordinato: Montserrat
- Peso carattere elenco non ordinato: grassetto
- Stile carattere elenco non ordinato: maiuscolo
- Dimensione del testo non ordinato:
- Desktop: 1vw
- Tablet: 2.5vw
- Telefono: 3.5vw
- Altezza riga elenco non ordinato: 1,5 em
- Tipo di stile elenco non ordinato: nessuno
- Posizione stile elenco non ordinato: interno
Spaziatura
E completa le impostazioni del modulo aggiungendo un'imbottitura superiore e inferiore personalizzata.
- Imbottitura superiore: 5%
- Imbottitura inferiore: 5%
Clona il modulo di testo per creare una variazione senza sottomenu
Una volta completato il primo modulo, puoi clonarlo una volta. Useremo questa duplicazione per creare una variazione della voce di menu senza voci di sottomenu.
Lascia fuori il sottomenu e attiva/disattiva l'icona
Per trasformare questo modulo duplicato in una normale voce di menu senza voci di sottomenu, usa invece questa struttura HTML:
<span style="color: #686868;">03—</span> <a href="#">Contact</a>
Riutilizza entrambi i tipi di voci di menu
Una volta che hai entrambe le varianti delle voci di menu in atto, puoi riutilizzarle entrambe di conseguenza clonandole e modificando il contenuto.
Aggiungi il modulo di testo n. 2 alla colonna 2
Aggiungi contenuto H4 e paragrafo alla casella del contenuto
Nella colonna 2, aggiungeremo un altro modulo di testo con alcuni contenuti H4 e paragrafi a nostra scelta.
Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Alata
- Colore del testo: #cecece
- Dimensione del testo:
- Desktop: 0.8vw
- Tablet: 2.4vw
- Telefono: 3.4vw
- Spaziatura delle lettere del testo: 1px
- Altezza riga di testo: 1,5 em
- Colore del testo: chiaro
Impostazioni testo H4
Apportare anche alcune modifiche alle impostazioni del testo H4.
- Intestazione 4 Dimensione del testo:
- Desktop: 1vw
- Tablet: 3vw
- Telefono: 4vw
Dimensionamento
Quindi, modifica la larghezza del modulo nelle impostazioni di dimensionamento.
- Larghezza: 48%
Elemento principale CSS
E aggiungi una riga di codice CSS all'elemento principale del modulo. Questa riga di codice CSS ci aiuterà a posizionare due moduli di testo uno accanto all'altro.
display: inline-block;
Clona Testo Modulo #2
Cambia copia
Una volta completato il modulo di testo, puoi clonarlo una volta e modificare il contenuto di conseguenza.
Aggiungi il modulo Segui social media alla colonna 2
Aggiungi social network di scelta
L'ultimo modulo di cui abbiamo bisogno in questo progetto è un modulo di follow sui social media nella colonna 2. Aggiungi i social network di tua scelta.
Rimuovi il colore di sfondo di ogni social network individualmente
Rimuovi il colore di sfondo di ogni social network individualmente.
Spaziatura
Quindi, torna alle impostazioni generali del modulo e applica un margine superiore.
- Margine superiore: 5vh
4. Aggiungi funzionalità
Aggiungi la classe CSS al modulo di testo dell'icona di Hamburger
Ora che le basi del design del nostro menu per hamburger sono state costruite, ora possiamo concentrarci sull'aggiunta di funzionalità! La prima cosa che devi fare è aprire il modulo di testo contenente l'icona dell'hamburger e aggiungere la seguente classe CSS:
- Classe CSS: fullwidth-open
Aggiungi la classe CSS alla sezione #2
Quindi, apri la sezione del menu dell'hamburger, sezione #2, e aggiungi la seguente classe CSS:
- Classe CSS: menu a larghezza intera
Aggiungi la classe CSS a ogni modulo nel menu a larghezza intera
Per creare l'effetto di animazione scaglionamento personalizzato, dovremo applicare la seguente classe CSS a ciascun modulo nella sezione #2.
- Classe CSS: effetto sfalsato
Aggiungi una classe CSS extra alle voci di menu
Aggiungi anche una classe CSS extra, chiamata "elemento-menu-principale", a ciascuna delle voci di menu nella colonna 1.
- Classe CSS: elemento del menu principale con effetto scaglionamento
Aggiungi modulo codice alla sezione #1
Per applicare la funzionalità, utilizzeremo codice CSS e JQuery personalizzato. Metteremo questo codice in un nuovo modulo di codice nella seconda colonna della nostra riga nella sezione #1.
Inserisci codice CSS
Aggiungi il seguente codice CSS al Modulo codice tra i tag di stile come puoi notare nella schermata di stampa qui sotto.
/* enable class below once you're done editing the menu */
/*
.fullwidth-menu {
opacity: 0;
top: 0vh;
visibility: hidden;
}
*/
.line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.fullwidth-open.open .line{
background: white;
}
.line-1 {
top: 15px;
}
.line-2 {
top: 25px;
width: 80%;
}
.line-3 {
top: 35px;
width: 50%;
}
.fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.fullwidth-open.open .line-2 {
display: none;
}
.fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
}
.fullwidth-menu {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
.main-menu-item ul {
display: none;
padding: 0;
margin-top: 50px;
}
.toggle-sub-menu {
cursor: pointer;
}
Inserisci la libreria Anime.js
Continua aggiungendo la libreria JavaScript Anime utilizzando i tag script come puoi vedere nella schermata di stampa qui sotto . Useremo questa fantastica libreria per creare l'effetto sfalsato nel passaggio successivo del tutorial.
- src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”
Inserisci codice JQuery
Le funzionalità di clic nel nostro menu hamburger sono alimentate dal seguente codice JQuery. Assicurati di inserire questo codice tra i tag di script come puoi vedere nella schermata di stampa qui sotto.
jQuery(function($){
$(document).ready(function(){
// All variables needed in functions
var menuSection = $('.fullwidth-menu');
var hamburgerIcon = $('.fullwidth-open');
var menuLink = $('.fullwidth-menu a');
var subMenu = $('.main-menu-item ul');
var toggleIcon = $('.toggle-sub-menu');
// Open fullwidth menu & animate items
hamburgerIcon.click(function(){
$(this).toggleClass('open');
menuSection.toggleClass('fullwidth-menu-open');
if (menuSection.hasClass("fullwidth-menu-open")) {
anime({
targets: '.stagger-effect',
translateY: [150, 0],
opacity: [0, 1],
loop: false,
delay: anime.stagger(100, {easing: 'easeOutQuad'})
});
} else {
subMenu.slideUp();
toggleIcon.text($(this).text() == '+' ? '-' : '+');
}
});
// Close fullwidth menu when clicking an item
menuLink.click(function(){
hamburgerIcon.toggleClass('open');
menuSection.toggleClass('fullwidth-menu-open');
subMenu.slideUp();
toggleIcon.text($(this).text() == '+' ? '-' : '+');
});
// Change icon when toggling the submenu
toggleIcon.click(function(){
var subMenu = $(this).parent().find("ul");
subMenu.slideToggle();
$(this).text($(this).text() == '-' ? '+' : '-');
});
});
});
Attiva la classe CSS non appena hai completato il design dell'intestazione a schermo intero
Ultimo ma non meno importante, abiliteremo una classe CSS nel Modulo Codice che puoi trovare nella prima sezione. Apri il modulo del codice e rimuovi "/* */" all'inizio e alla fine della lezione. L'abilitazione di questa classe (in combinazione con del codice JQuery già abilitato) assicurerà che la sezione contenente le voci di menu non venga caricata immediatamente quando qualcuno visita una delle tue pagine. Una volta abilitata questa classe, la seconda sezione della tua pagina scomparirà dal Visual Builder, ma potrai comunque accedervi in modalità Wireframe o disattivare la classe CSS se desideri apportare ulteriori modifiche.
5. Salva modifiche all'intestazione e al generatore di temi
Questo è tutto! L'unica cosa che resta da fare è salvare il modello e Divi Theme Builder e visualizzare il risultato sul tuo sito web!
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come essere creativo con la tua intestazione Divi. Più specificamente, ti abbiamo mostrato come creare un menu di hamburger animato personalizzato. Non appena un visitatore fa clic sull'icona dell'hamburger, un menu a schermo intero passa e rivela le voci di menu una per una, il che si traduce in una bella esperienza utente. Sei stato anche in grado di scaricare gratuitamente il file JSON del modello! Se hai domande, non esitare a lasciare un commento nella sezione commenti qui sotto.
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.