Jak zbudować animowane hamburgerowe menu z Divi i Anime.js

Opublikowany: 2021-02-17

W przeszłości udostępnialiśmy różne typy nagłówków, które można tworzyć za pomocą Divi i Divi Theme Builder. W rzeczywistości wszystkie samouczki można znaleźć w tym poście nawigacyjnym. W tym poście zauważysz, że pokazaliśmy Ci, jak utworzyć pełnoekranowy nagłówek, ale aby pomóc Ci posunąć projekt nagłówka jeszcze dalej, pokażemy Ci również, jak stworzyć niestandardowe animowane menu hamburgerów. Jest kilka godnych uwagi rzeczy dotyczących menu hamburgerów, które stworzymy:

  • Gdy tylko odwiedzający klikną ikonę hamburgera, pojawi się pełnoekranowy nagłówek, a każdy element menu będzie się wyświetlać jeden po drugim, nadając mu niestandardowy wygląd i styl.
  • Niestandardowe animacje są uruchamiane przy każdym otwarciu menu
  • Będziesz mógł również dodawać elementy rozwijane do elementów menu głównego, otwierają się one po kliknięciu i zamykają się automatycznie, gdy tylko ktoś zamknie menu lub kliknie element nawigacyjny

Innymi słowy, jest to zdecydowanie samouczek dotyczący nagłówków, który pomoże Ci dodać zaawansowany wygląd do Twojej witryny. Możesz też dowolnie stylizować elementy, a plik szablonu JSON możesz pobrać za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

hamburgerowe menu

mobilny

hamburgerowe menu

Pobierz szablon globalnego nagłówka ZA DARMO

Aby położyć swoje ręce na darmowym szablonie globalnego nagłówka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki
Pobierz za darmo

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Utwórz nowy szablon nagłówka

Przejdź do kreatora motywów Divi i dodaj nowy szablon globalnego nagłówka

Zacznij od przejścia do Divi Theme Builder. Tam dodaj nowy globalny nagłówek.

hamburgerowe menu

Zacznij budować od podstaw

I zacznij budować projekt nagłówka od podstaw.

hamburgerowe menu

2. Zbuduj logo i ikonę hamburgera

Ustawienia sekcji

Kolor tła

Po wejściu do edytora szablonów zaczniemy od zbudowania logo i ikony hamburgera. Zauważysz, że jest tam już sekcja. Otwórz ustawienia sekcji i zastosuj przezroczysty kolor tła.

  • Kolor tła: rgba (255,255,255,0)

hamburgerowe menu

Rozstaw

Przejdź do zakładki projektu sekcji i usuń wszystkie domyślne górne i dolne wyściółki.

  • Górna wyściółka: 0px
  • Dolna wyściółka: 0px

hamburgerowe menu

Pozycja

Następnie przejdź do zaawansowanych i obróć sekcję naprawioną.

  • Pozycja: Naprawiono
  • Lokalizacja: górny lewy
  • Indeks Z: 13

hamburgerowe menu

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

hamburgerowe menu

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza, przejdź do zakładki projekt i odpowiednio zmień ustawienia rozmiaru:

  • Użyj niestandardowej szerokości rynny: Tak
  • Szerokość rynny: 1
  • Wyrównaj wysokości kolumn: Tak
  • Szerokość: 95%
  • Maksymalna szerokość: 100%

hamburgerowe menu

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

  • Górna wyściółka: 0px
  • Dolna wyściółka: 0px

hamburgerowe menu

Główny element CSS

Aby upewnić się, że logo i ikona hamburgera pojawiają się obok siebie na mniejszych ekranach, wstawimy jeden wiersz kodu CSS w głównym elemencie wiersza. 

display: flex;

hamburgerowe menu

Dodaj moduł obrazu do kolumny 1

Prześlij logo

Czas dodać moduły, zaczynając od modułu obrazu w kolumnie 1. Prześlij wybrane logo.

hamburgerowe menu

Rozmiary

Przejdź do zakładki projektu i następnie zmień ustawienia rozmiaru.

  • Maksymalna szerokość:
    • Pulpit: 80px
    • Tablet i telefon: 50px

hamburgerowe menu

Pozycja

Następnie zmień położenie całego modułu.

  • Pozycja: bezwzględna
  • Lokalizacja: górny lewy
  • Przesunięcie w pionie: 20px

hamburgerowe menu

Dodaj moduł tekstowy do kolumny 3

Struktura HTML w polu zawartości

W trzeciej kolumnie dodamy moduł tekstowy. Wykorzystamy ten moduł tekstowy do stworzenia naszej ikony hamburgera. Zacznij od przełączenia się na kartę tekstową w polu treści i wstaw następujące znaczniki HTML: 

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

hamburgerowe menu

Rozmiary

Następnie zmodyfikuj ustawienia rozmiaru modułu.

  • Szerokość: 80px
  • Wysokość: 80px

hamburgerowe menu

Rozstaw

Następnie zastosuj niestandardowe wartości dopełnienia na różnych rozmiarach ekranu.

  • Górna wyściółka:
    • Pulpit: 10px
    • Tablet i telefon: 17px
  • Dolna wyściółka:
    • Pulpit: 10px
    • Tablet i telefon: 17px
  • Lewa wyściółka:
    • Pulpit: 15px
    • Tablet i telefon: 30 pikseli
  • Prawa wyściółka:
    • Pulpit: 15px
    • Tablet i telefon: 10 pikseli

hamburgerowe menu

Pozycja

Zmień również położenie tego modułu.

  • Pozycja: bezwzględna
  • Lokalizacja: lewy górny róg

hamburgerowe menu

3. Zbuduj menu hamburgerów

Dodaj nową sekcję

Tło gradientowe

Teraz, gdy mamy już logo i ikonę hamburgera, możemy przejść do następnej części, która poświęcona jest tworzeniu menu hamburgerowego i wszystkich jego pozycji. Zacznij od dodania nowej sekcji, otwórz ustawienia sekcji i zastosuj tło gradientowe.

  • Kolor 1: #000000
  • Kolor 2: #111111
  • Typ gradientu: liniowy
  • Kierunek gradientu: 90 stopni
  • Pozycja startowa: 50%
  • Pozycja końcowa: 50%

hamburgerowe menu

Rozmiary

Następnie zastosuj minimalną i maksymalną wysokość do ustawień rozmiaru.

  • Minimalna wysokość: 100vh
  • Maksymalna wysokość: 100vh

hamburgerowe menu

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki sekcji.

  • Górna wyściółka: 0px
  • Dolna wyściółka: 0px

hamburgerowe menu

Przepełnienia

Zmodyfikuj również przelewy.

  • Przepełnienie poziome: ukryte
  • Przepełnienie pionowe: Auto

hamburgerowe menu

Pozycja

Aby mieć pewność, że menu będzie można otworzyć przez cały czas, zmienimy położenie sekcji na karcie Zaawansowane.

  • Pozycja: Naprawiono
  • Lokalizacja Góra Centrum

hamburgerowe menu

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

hamburgerowe menu

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza, przejdź do zakładki projekt i zmień ustawienia rozmiaru w następujący sposób:

  • Użyj niestandardowej szerokości rynny: Tak
  • Szerokość rynny: 1
  • Wyrównaj wysokości kolumn: Tak
  • Szerokość: 100%
  • Maksymalna szerokość: 100%

hamburgerowe menu

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

  • Górna wyściółka: 0px
  • Dolna wyściółka: 0px

hamburgerowe menu

Przepełnienia

Następnie przejdź do zakładki zaawansowane i zmień przepełnienia.

  • Przepełnienie poziome: ukryte
  • Przepełnienie pionowe: Auto

hamburgerowe menu

Pozycja

Zmień również położenie rzędu.

  • Pozycja: bezwzględna
  • Lokalizacja Góra Centrum

hamburgerowe menu

Ustawienia kolumny 1

Rozstaw

Następnie otworzymy ustawienia kolumny 1 naszego wiersza i zastosujemy niestandardowe wartości dopełnienia responsywnego.

  • Górna wyściółka:
    • Komputer stacjonarny: 24vh
    • Tablet i telefon: 10vh
  • Dolna wyściółka:
    • Komputer stacjonarny: 24vh
    • Tablet i telefon: 5vh
  • Lewa wyściółka: 13%
  • Prawa wyściółka: 13%

hamburgerowe menu

Granica

Zastosujemy też niektóre ustawienia obramowania:

  • Szerokość prawego obramowania:
    • Pulpit: 2px
    • Tablet i telefon: 0px\
  • Kolor prawego obramowania: #191919
  • Szerokość dolnej krawędzi:
    • Pulpit: 0px
    • Tablet i telefon: 2px
  • Kolor prawego obramowania: #191919

hamburgerowe menu

Ustawienia kolumny 2

Rozstaw

Następnie przejdziemy do kolumny 2 i tam również zastosujemy niestandardowe wartości dopełnienia.

  • Górna wyściółka:
    • Komputer stacjonarny: 24vh
    • Tablet i telefon: 5vh
  • Dolna wyściółka:
    • Komputer stacjonarny: 24vh
    • Tablet i telefon: 5vh
  • Lewa wyściółka: 13%
  • Prawa wyściółka: 13%

hamburgerowe menu

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H3

Czas na dodanie modułów, zaczynając od pierwszego modułu tekstowego w kolumnie 1. Dodaj wybrane przez siebie treści H3.

hamburgerowe menu

Ustawienia tekstu H3

Przejdź do zakładki projektu i zmień ustawienia tekstu H3 w następujący sposób:

  • Czcionka nagłówka 3: Montserrat
  • Grubość czcionki nagłówka 3: Ultra Bold
  • Styl czcionki nagłówka 3: Wielkie litery
  • Kolor tekstu nagłówka 3: #ffffff
  • Nagłówek 3 Rozmiar tekstu
    • Pulpit: 1vw
    • Tablet: 2,5vw
    • Telefon: 3.5vw
  • Nagłówek 3 Odstępy między literami: 5px

hamburgerowe menu

Rozstaw

Następnie dodaj trochę dolnego marginesu.

  • Dolny margines: 5vh

hamburgerowe menu

Klonuj moduł tekstowy i umieść duplikat w kolumnie 2

Po ukończeniu tego pierwszego modułu możesz go sklonować raz i umieścić duplikat w kolumnie 2.

hamburgerowe menu

Zmień zawartość

Pamiętaj, aby zmienić zawartość tego zduplikowanego modułu.

hamburgerowe menu

Dodaj moduł tekstowy nr 2 do kolumny 2

Struktura HTML w polu zawartości

Aby zaprezentować nasze pozycje menu, w tym pozycje podmenu, użyjemy zakładki tekstowej nowego modułu tekstowego. Śmiało i dodaj nowy moduł tekstowy do kolumny 1 i wstaw następujący kod 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>

hamburgerowe menu

Ustawienia tekstu

Przejdź do zakładki projektu modułu i zmień ustawienia tekstu w następujący sposób:

  • Czcionka tekstu: Montserrat
  • Grubość czcionki tekstu: Cienka
  • Kolor tekstu: #ffffff
  • Rozmiar czcionki:
    • Komputer stacjonarny: 2,7vw
    • Tablet: 4vw
    • Telefon: 6vw
  • Odstępy między literami tekstu: 0.1 em
  • Wysokość linii tekstu: 1em

hamburgerowe menu

Ustawienia tekstu łącza

Zmień też kolor tekstu linku.

  • Kolor tekstu Lin: #ffffff

hamburgerowe menu

Nieuporządkowane ustawienia tekstu listy

Następnie zmodyfikuj ustawienia tekstu listy nieuporządkowanej.

  • Nieuporządkowana czcionka listy: Montserrat
  • Nieuporządkowana grubość czcionki listy: pogrubiona
  • Styl czcionki nieuporządkowanej listy: wielkie litery
  • Nieuporządkowany rozmiar tekstu:
    • Pulpit: 1vw
    • Tablet: 2,5vw
    • Telefon: 3.5vw
  • Nieuporządkowana wysokość linii listy: 1,5 em
  • Typ nieuporządkowanego stylu listy: Brak
  • Pozycja stylu listy nieuporządkowanej: Wewnątrz

hamburgerowe menu

Rozstaw

I uzupełnij ustawienia modułu, dodając niestandardową górną i dolną wyściółkę.

  • Górna wyściółka: 5%
  • Dolna wyściółka: 5%

hamburgerowe menu

Klonuj moduł tekstowy, aby utworzyć odmianę bez podmenu

Po ukończeniu pierwszego modułu możesz go sklonować raz. Użyjemy tego powielania, aby utworzyć odmianę elementu menu bez elementów podmenu.

hamburgerowe menu

Pomiń podmenu i ikonę przełączania

Aby zmienić ten zduplikowany moduł w zwykły element menu bez elementów podmenu, użyj zamiast tego struktury HTML: 

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

hamburgerowe menu

Użyj ponownie obu typów pozycji menu

Po umieszczeniu obu wariantów elementów menu możesz ponownie użyć ich odpowiednio, klonując je i zmieniając zawartość.

hamburgerowe menu

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość H4 i akapitu do pola zawartości

W kolumnie 2 dodamy kolejny moduł tekstowy z wybraną przez nas zawartością H4 i akapitów.

hamburgerowe menu

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

  • Czcionka tekstu: Alata
  • Kolor tekstu: #cecece
  • Rozmiar czcionki:
    • Komputer stacjonarny: 0,8vw
    • Tablet: 2.4vw
    • Telefon: 3.4vw
  • Odstępy między literami tekstu: 1px
  • Wysokość linii tekstu: 1,5 em
  • Kolor tekstu: jasny

hamburgerowe menu

Ustawienia tekstu H4

Wprowadź również pewne zmiany w ustawieniach tekstu H4.

  • Rozmiar tekstu nagłówka 4:
    • Pulpit: 1vw
    • Tablet: 3vw
    • Telefon: 4vw

hamburgerowe menu

Rozmiary

Następnie zmodyfikuj szerokość modułu w ustawieniach rozmiaru.

  • Szerokość: 48%

hamburgerowe menu

Główny element CSS

I dodaj jedną linię kodu CSS do głównego elementu modułu. Ta linia kodu CSS pomoże nam umieścić obok siebie dwa moduły tekstowe. 

display: inline-block;

hamburgerowe menu

Klonuj moduł tekstowy nr 2

Zmień kopię

Po ukończeniu modułu tekstowego możesz go raz sklonować i odpowiednio zmienić zawartość.

hamburgerowe menu

Dodaj moduł śledzenia mediów społecznościowych do kolumny 2

Dodaj wybrane sieci społecznościowe

Ostatnim modułem, którego potrzebujemy w tym projekcie, jest moduł śledzenia mediów społecznościowych w kolumnie 2. Dodaj wybrane przez siebie sieci społecznościowe.

hamburgerowe menu

Usuń kolor tła każdej sieci społecznościowej indywidualnie

Usuń kolor tła każdej sieci społecznościowej indywidualnie.

hamburgerowe menu

Rozstaw

Następnie wróć do ogólnych ustawień modułu i zastosuj górny margines.

  • Górny margines: 5vh

hamburgerowe menu

4. Dodaj funkcjonalność

Dodaj klasę CSS do modułu tekstowego ikony Hamburger

Teraz, gdy zbudowaliśmy podstawy naszego projektu menu hamburgerowego, możemy teraz skupić się na dodawaniu funkcjonalności! Pierwszą rzeczą, którą musisz zrobić, to otworzyć moduł tekstowy zawierający ikonę hamburgera i dodać następującą klasę CSS:

  • Klasa CSS: pełna szerokość-otwarta

hamburgerowe menu

Dodaj klasę CSS do sekcji #2

Następnie otwórz sekcję menu hamburgerów, sekcję 2 i dodaj następującą klasę CSS:

  • Klasa CSS: menu o pełnej szerokości

hamburgerowe menu

Dodaj klasę CSS do każdego modułu w menu o pełnej szerokości

Aby stworzyć niestandardowy efekt animacji schodkowej, musimy zastosować poniższą klasę CSS do każdego modułu w sekcji 2.

  • Klasa CSS: efekt schodkowy

hamburgerowe menu

Dodaj dodatkową klasę CSS do pozycji menu

Dodaj dodatkową klasę CSS, zwaną „main-menu-item”, do każdego elementu menu w kolumnie 1.

  • Klasa CSS: efekt schodkowy w menu głównym

hamburgerowe menu

Dodaj moduł kodu do sekcji #1

Aby zastosować tę funkcjonalność, użyjemy niestandardowego kodu CSS i JQuery. Umieścimy ten kod w nowym module kodu w drugiej kolumnie naszego wiersza w sekcji #1.

hamburgerowe menu

Wstaw kod CSS

Dodaj następujący kod CSS do modułu Code pomiędzy tagami stylu, jak widać na poniższym zrzucie ekranu. 

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

hamburgerowe menu

Wstaw bibliotekę Anime.js

Kontynuuj, dodając bibliotekę Anime JavaScript za pomocą tagów skryptu, jak widać na poniższym zrzucie ekranu . Użyjemy tej niesamowitej biblioteki, aby stworzyć efekt rozłożenia w następnym kroku samouczka.

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

hamburgerowe menu

Wstaw kod JQuery

Funkcje kliknięć w naszym menu hamburgerów są obsługiwane przez następujący kod JQuery. Upewnij się, że umieściłeś ten kod pomiędzy tagami skryptu, jak widać na poniższym zrzucie ekranu. 

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

hamburgerowe menu

Aktywuj klasę CSS zaraz po zakończeniu projektowania pełnoekranowego nagłówka

Na koniec włączymy klasę CSS w module kodu, który znajdziesz w pierwszej sekcji. Otwórz moduł kodu i usuń „/* */” na początku i na końcu klasy. Włączenie tej klasy (w połączeniu z pewnym kodem JQuery, który jest już włączony) sprawi, że sekcja zawierająca elementy menu nie zostanie załadowana od razu, gdy ktoś odwiedzi jedną z Twoich stron. Po włączeniu tej klasy druga sekcja na stronie zniknie z programu Visual Builder, ale nadal możesz uzyskać do niej dostęp w trybie szkieletowym lub wyłączyć klasę CSS, jeśli chcesz wprowadzić dodatkowe zmiany.

hamburgerowe menu

5. Zapisz zmiany nagłówka i kreatora motywów

Otóż ​​to! Jedyne, co pozostało do zrobienia, to zapisanie szablonu i kreatora motywów Divi oraz wyświetlenie wyniku na swojej stronie!

hamburgerowe menu

hamburgerowe menu

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

hamburgerowe menu

mobilny

hamburgerowe menu

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością dzięki nagłówkowi Divi. Mówiąc dokładniej, pokazaliśmy, jak stworzyć niestandardowe animowane menu hamburgerów. Gdy tylko odwiedzający kliknie ikonę hamburgera, pełnoekranowe menu przechodzi i pokazuje pozycje menu jeden po drugim, co zapewnia piękne wrażenia użytkownika. Udało Ci się również pobrać szablonowy plik JSON za darmo! Jeśli masz jakieś pytania, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.