Cum să construiești un meniu Hamburger animat de Stagger cu Divi & Anime.js

Publicat: 2021-02-17

În trecut, am împărtășit diferite tipuri de anteturi pe care le puteți crea cu Divi și Divi Theme Builder. De fapt, puteți găsi toate aceste tutoriale enumerate în această postare de navigare. În această postare, veți observa că v-am arătat cum să creați un antet pe ecran complet, dar pentru a vă ajuta să duceți și mai mult designul antetului, vă vom arăta cum să creați și un meniu hamburger personalizat. Există câteva lucruri notabile despre meniul hamburger pe care îl vom crea:

  • De îndată ce vizitatorii fac clic pe pictograma hamburger, un antet pe ecran complet va trece, iar fiecare element de meniu va dezvălui unul câte unul, oferindu-i un aspect și o senzație personalizată.
  • Animațiile personalizate sunt declanșate de fiecare dată când meniul este deschis
  • Veți putea adăuga și elemente derulante la elementele meniului principal, acestea se deschid la clic și se închid automat de îndată ce cineva închide meniul sau face clic pe un element de navigare

Cu alte cuvinte, acesta este cu siguranță un tutorial de antet care vă va ajuta să adăugați acel aspect avansat pe site-ul dvs. web. Puteți stiliza articolele oricum doriți și veți putea descărca gratuit fișierul șablon JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

meniu hamburger

Mobil

meniu hamburger

Descărcați gratuit șablonul Global Header

Pentru a pune mâna pe șablonul global gratuit de antet, va trebui mai întâi să le descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele
Descarcă gratis

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

1. Creați un șablon de antet nou

Accesați Divi Theme Builder și adăugați un nou șablon de antet global

Începeți accesând Divi Theme Builder. Unul acolo, adăugați un nou antet global.

meniu hamburger

Începeți să construiți de la zero

Și începeți să construiți designul antetului de la zero.

meniu hamburger

2. Creați pictograma Logo & Hamburger

Setări secțiune

Culoare de fundal

Odată ajuns în editorul de șabloane, vom începe prin a construi sigla și pictograma hamburger. Veți observa că există deja o secțiune acolo. Deschideți setările secțiunii și aplicați o culoare de fundal transparentă.

  • Culoare fundal: rgba (255,255,255,0)

meniu hamburger

Spațiere

Treceți la fila de proiectare a secțiunii și eliminați toate umpluturile implicite de sus și de jos.

  • Căptușeală de sus: 0 px
  • Căptușeală inferioară: 0 px

meniu hamburger

Poziţie

Apoi, mergeți la avansat și rotiți secțiunea fixă.

  • Poziție: Fix
  • Locație: stânga sus
  • Indicele Z: 13

meniu hamburger

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

meniu hamburger

Dimensionare

Fără a adăuga încă module, deschideți setările rândului, treceți la fila de proiectare și modificați setările de dimensionare în consecință:

  • Utilizați lățimea personalizată a jgheabului: da
  • Lățimea jgheabului: 1
  • Egalizați înălțimile coloanei: Da
  • Lățime: 95%
  • Lățime maximă: 100%

meniu hamburger

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

  • Căptușeală de sus: 0 px
  • Căptușeală inferioară: 0 px

meniu hamburger

Element principal CSS

Și pentru a ne asigura că atât logo-ul, cât și pictograma hamburger apar una lângă alta pe dimensiuni de ecran mai mici, vom insera o linie de cod CSS în elementul principal al rândului. 

display: flex;

meniu hamburger

Adăugați modulul de imagine în coloana 1

Încărcați sigla

Este timpul să adăugați module, începând cu un modul de imagine în coloana 1. Încărcați o siglă la alegere.

meniu hamburger

Dimensionare

Treceți la fila de proiectare și modificați setările de dimensionare în continuare.

  • Lățimea maximă:
    • Desktop: 80 px
    • Tabletă și telefon: 50 px

meniu hamburger

Poziţie

Apoi, repoziționați întregul modul.

  • Poziție: Absolută
  • Locație: stânga sus
  • Decalaj vertical: 20 px

meniu hamburger

Adăugați un modul de text în coloana 3

Structura HTML în caseta de conținut

În a treia coloană, vom adăuga un modul de text. Vom folosi acest modul text pentru a crea pictograma hamburgerului nostru. Începeți prin trecerea la fila text din caseta de conținut și introduceți următoarele etichete HTML: 

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

meniu hamburger

Dimensionare

Modificați apoi setările de dimensionare ale modulului.

  • Lățime: 80 px
  • Înălțime: 80 px

meniu hamburger

Spațiere

Apoi, aplicați valori de umplere personalizate pe diferite dimensiuni de ecran.

  • Căptușeală superioară:
    • Desktop: 10 px
    • Tabletă și telefon: 17 px
  • Căptușeală inferioară:
    • Desktop: 10 px
    • Tabletă și telefon: 17 px
  • Căptușeală stângă:
    • Desktop: 15 px
    • Tabletă și telefon: 30 px
  • Garnitura dreapta:
    • Desktop: 15 px
    • Tabletă și telefon: 10 px

meniu hamburger

Poziţie

Repoziționați și acest modul.

  • Poziție: Absolută
  • Locație: colțul din stânga sus

meniu hamburger

3. Construiți meniul Hamburger

Adăugați o secțiune nouă

Fundal de gradient

Acum că avem sigla și pictograma hamburgerului la locul lor, putem trece la următoarea parte dedicată construirii meniului hamburgerului și a tuturor elementelor sale. Începeți prin adăugarea unei noi secțiuni, deschideți setările secțiunii și aplicați un fundal de gradient.

  • Culoare 1: # 000000
  • Culoare 2: # 111111
  • Tipul gradientului: liniar
  • Direcția gradientului: 90 grade
  • Poziția inițială: 50%
  • Poziție finală: 50%

meniu hamburger

Dimensionare

Aplicați o înălțime minimă și o înălțime maximă setărilor de dimensionare următoare.

  • Înălțime minimă: 100vh
  • Înălțime maximă: 100vh

meniu hamburger

Spațiere

Apoi, eliminați toate căptușelile implicite de sus și de jos.

  • Căptușeală de sus: 0 px
  • Căptușeală inferioară: 0 px

meniu hamburger

Revărsări

Modificați și debordurile.

  • Overflow orizontal: Ascuns
  • Vertical Overflow: Auto

meniu hamburger

Poziţie

Pentru a ne asigura că meniul poate fi deschis în orice moment, vom repoziționa secțiunea din fila avansată.

  • Poziție: Fix
  • Locație Centrul de sus

meniu hamburger

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

meniu hamburger

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor, treceți la fila de proiectare și modificați setările de dimensionare după cum urmează:

  • Utilizați lățimea personalizată a jgheabului: da
  • Lățimea jgheabului: 1
  • Egalizați înălțimile coloanei: Da
  • Lățime: 100%
  • Lățime maximă: 100%

meniu hamburger

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

  • Căptușeală de sus: 0 px
  • Căptușeală inferioară: 0 px

meniu hamburger

Revărsări

Apoi, accesați fila avansată și schimbați debordurile.

  • Overflow orizontal: Ascuns
  • Vertical Overflow: Auto

meniu hamburger

Poziţie

Repoziționați și rândul.

  • Poziție: Absolută
  • Locație Centrul de sus

meniu hamburger

Setări coloana 1

Spațiere

Apoi, vom deschide setările coloanei 1 ale rândului nostru și vom aplica câteva valori de umplere adaptabile personalizate.

  • Căptușeală superioară:
    • Desktop: 24vh
    • Tabletă și telefon: 10vh
  • Căptușeală inferioară:
    • Desktop: 24vh
    • Tabletă și telefon: 5vh
  • Căptușeală stângă: 13%
  • Căptușeală dreaptă: 13%

meniu hamburger

Frontieră

Vom aplica și câteva setări de margine:

  • Lățimea marginii drepte:
    • Desktop: 2 px
    • Tabletă și telefon: 0px \
  • Culoare margine dreaptă: # 191919
  • Lățimea marginii inferioare:
    • Desktop: 0 px
    • Tabletă și telefon: 2 px
  • Culoare margine dreaptă: # 191919

meniu hamburger

Setări coloana 2

Spațiere

Apoi, vom trece la coloana 2 și vom aplica și câteva valori de umplere personalizate.

  • Căptușeală superioară:
    • Desktop: 24vh
    • Tabletă și telefon: 5vh
  • Căptușeală inferioară:
    • Desktop: 24vh
    • Tabletă și telefon: 5vh
  • Căptușeală stângă: 13%
  • Căptușeală dreaptă: 13%

meniu hamburger

Adăugați modulul de text nr. 1 în coloana 1

Adăugați conținut H3

Este timpul să adăugați module, începând cu un prim modul de text din coloana 1. Adăugați conținut H3 la alegere.

meniu hamburger

Setări text H3

Treceți la fila de proiectare și modificați setările de text H3 după cum urmează:

  • Rubrica 3 Font: Montserrat
  • Titlul 3 Greutate font: Ultra Bold
  • Titlul 3 Stilul fontului: majuscule
  • Rubrica 3 Culoarea textului: #ffffff
  • Rubrica 3 Dimensiune text
    • Desktop: 1vw
    • Tabletă: 2,5vw
    • Telefon: 3.5vw
  • Rubrica 3 Spațierea literelor: 5 px

meniu hamburger

Spațiere

Adăugați câteva margini de jos în continuare.

  • Marja inferioară: 5vh

meniu hamburger

Clonați modulul text și plasați duplicatul în coloana 2

După ce ați finalizat acest prim modul, îl puteți clona o dată și plasa duplicatul în coloana 2.

meniu hamburger

Schimbați conținutul

Asigurați-vă că modificați conținutul din acest modul duplicat.

meniu hamburger

Adăugați modulul de text nr. 2 în coloana 2

Structura HTML în caseta de conținut

Pentru a prezenta elementele noastre de meniu, inclusiv elementele de submeniu, vom folosi fila text a unui nou modul de text. Continuați și adăugați un nou modul de text în coloana 1 și introduceți următorul 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>

meniu hamburger

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

  • Font text: Montserrat
  • Greutatea fontului textului: subțire
  • Culoarea textului: #ffffff
  • Mărimea textului:
    • Desktop: 2,7vw
    • Tabletă: 4vw
    • Telefon: 6vw
  • Spațiere scrisoare text: 0,1em
  • Înălțimea liniei de text: 1em

meniu hamburger

Setări text link

Schimbați și culoarea textului linkului.

  • Culoare text Lin: #ffffff

meniu hamburger

Setări text de listă neordonate

Apoi, modificați setările textului listei neordonate.

  • Font Lista neordonată: Montserrat
  • Greutatea fontului din lista neordonată: îndrăzneață
  • Stil font de listă neordonată: majuscule
  • Dimensiune text neordonată:
    • Desktop: 1vw
    • Tabletă: 2,5vw
    • Telefon: 3.5vw
  • Înălțime linie listă neordonată: 1,5em
  • Tip de stil de listă neordonat: Nici unul
  • Poziția stilului listei neordonate: în interior

meniu hamburger

Spațiere

Și finalizați setările modulului adăugând câteva umpluturi personalizate în partea de sus și de jos.

  • Căptușeală superioară: 5%
  • Căptușeală inferioară: 5%

meniu hamburger

Clonați modulul text pentru a crea variații fără submeniu

După ce ați finalizat primul modul, îl puteți clona o singură dată. Vom folosi această dublare pentru a crea o variantă a elementului de meniu fără elemente de submeniu.

meniu hamburger

Eliminați submeniul și comutați pictograma

Pentru a transforma acest modul duplicat într-un element de meniu obișnuit fără elemente de submeniu, utilizați în schimb această structură HTML: 

<span style="color: #686868;">03—</span> <a href="#">Contact</a>

meniu hamburger

Reutilizați ambele tipuri de elemente de meniu

După ce aveți ambele variante ale elementelor de meniu la locul lor, le puteți reutiliza în mod corespunzător, clonându-le și schimbând conținutul.

meniu hamburger

Adăugați modulul de text nr. 2 în coloana 2

Adăugați conținut H4 și paragraf în caseta de conținut

În coloana 2, vom adăuga un alt modul de text cu un conținut H4 și paragraf la alegere.

meniu hamburger

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

  • Font text: Alata
  • Culoarea textului: #ececece
  • Mărimea textului:
    • Desktop: 0,8vw
    • Tabletă: 2.4vw
    • Telefon: 3.4vw
  • Spațiere scrisoare text: 1 px
  • Înălțimea liniei de text: 1,5em
  • Culoarea textului: deschis

meniu hamburger

Setări text H4

Modificați și setările de text H4.

  • Titlul 4 Dimensiune text:
    • Desktop: 1vw
    • Tabletă: 3vw
    • Telefon: 4vw

meniu hamburger

Dimensionare

Apoi, modificați lățimea modulului în setările de dimensionare.

  • Lățime: 48%

meniu hamburger

Element principal CSS

Și adăugați o linie de cod CSS la elementul principal al modulului. Această linie de cod CSS ne va ajuta să amplasăm două module text unul lângă celălalt. 

display: inline-block;

meniu hamburger

Clonați modulul de text nr. 2

Modificare copiere

După ce ați finalizat modulul de text, îl puteți clona o dată și puteți modifica conținutul în consecință.

meniu hamburger

Adăugați modulul Social Media Follow în coloana 2

Adăugați rețele sociale la alegere

Ultimul modul de care avem nevoie în acest design este un modul Social Follow Follow din coloana 2. Adăugați rețelele sociale la alegere.

meniu hamburger

Eliminați individual culoarea de fundal a fiecărei rețele sociale

Eliminați culoarea de fundal a fiecărei rețele sociale individual.

meniu hamburger

Spațiere

Apoi, reveniți la setările generale ale modulului și aplicați o marjă superioară.

  • Marja superioară: 5vh

meniu hamburger

4. Adăugați funcționalitate

Adăugați Clasa CSS la modulul de text cu pictograma Hamburger

Acum, după ce a fost construită baza designului meniului hamburger, ne putem concentra acum pe adăugarea funcționalității! Primul lucru pe care trebuie să-l faceți este să deschideți modulul text care conține pictograma hamburger și să adăugați următoarea clasă CSS:

  • Clasa CSS: fullwidth-open

meniu hamburger

Adăugați Clasa CSS la Secțiunea # 2

Apoi, deschideți secțiunea meniului hamburger, secțiunea # 2 și adăugați următoarea clasă CSS:

  • Clasa CSS: meniu cu lățime completă

meniu hamburger

Adăugați Clasa CSS la fiecare modul din meniul Fullwidth

Pentru a crea efectul de animație personalizată, trebuie să aplicăm următoarea clasă CSS fiecărui modul din secțiunea # 2.

  • Clasa CSS: efect de eșalonare

meniu hamburger

Adăugați o clasă CSS suplimentară la elementele din meniu

Adăugați o clasă CSS suplimentară, numită „main-menu-item”, la fiecare dintre elementele de meniu din coloana 1, de asemenea.

  • Clasa CSS: element de meniu principal cu efect de eșalonare

meniu hamburger

Adăugați un modul de cod la secțiunea # 1

Pentru a aplica funcționalitatea, vom folosi cod CSS și JQuery personalizate. Vom plasa acest cod într-un nou modul de cod în a doua coloană a rândului nostru din secțiunea # 1.

meniu hamburger

Introduceți codul CSS

Adăugați următorul cod CSS la modulul de cod dintre etichetele de stil, după cum puteți observa în ecranul de imprimare de mai jos. 

/* 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;
}

meniu hamburger

Introduceți Biblioteca Anime.js

Continuați prin adăugarea bibliotecii JavaScript Anime folosind etichete script, după cum puteți vedea în ecranul de imprimare de mai jos . Vom folosi această minunată bibliotecă pentru a crea efectul de eșalonare în pasul următor al tutorialului.

  • src = ”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

meniu hamburger

Introduceți codul JQuery

Funcționalitățile de clic din meniul nostru hamburger sunt alimentate de următorul cod JQuery. Asigurați-vă că plasați acest cod între etichetele de script așa cum puteți vedea în ecranul de imprimare de mai jos. 

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() == '-' ? '+' : '-'); 
});  
  
});
});

meniu hamburger

Activați clasa CSS imediat ce ați finalizat proiectarea antetului pe ecran complet

Nu în ultimul rând, vom activa o clasă CSS în modulul de cod pe care îl puteți găsi în prima secțiune. Deschideți modulul de cod și eliminați „/ * * /” la începutul și la sfârșitul clasei. Activarea acestei clase (în combinație cu un cod JQuery deja activat) vă va asigura că secțiunea care conține elementele de meniu nu se încarcă imediat când cineva vă vizitează una dintre pagini. După ce activați această clasă, a doua secțiune de pe pagina dvs. va dispărea din Visual Builder, dar o puteți accesa în continuare în modul Wireframe sau puteți dezactiva clasa CSS dacă doriți să faceți modificări suplimentare.

meniu hamburger

5. Salvați modificările antetului și ale constructorului de teme

Asta e! Singurul lucru rămas de făcut este să salvați șablonul și Divi Theme Builder și să vizualizați rezultatul pe site-ul dvs. web!

meniu hamburger

meniu hamburger

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

meniu hamburger

Mobil

meniu hamburger

Gânduri finale

În această postare, v-am arătat cum să deveniți creativi cu antetul Divi. Mai exact, v-am arătat cum să creați un meniu de hamburger personalizat. De îndată ce un vizitator face clic pe pictograma hamburger, un meniu cu ecran complet trece și dezvăluie elementele de meniu unul câte unul, ceea ce duce la o experiență de utilizator frumoasă. Ați putut descărca gratuit și șablonul JSON! Dacă aveți întrebări, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.