Cara Membuat Menu Hamburger Animasi Stagger dengan Divi & Anime.js

Di masa lalu, kami telah membagikan berbagai jenis header yang dapat Anda buat dengan Divi dan Divi Theme Builder. Faktanya, Anda dapat menemukan semua tutorial yang tercantum di posting navigasi ini. Dalam posting itu, Anda akan melihat kami telah menunjukkan kepada Anda cara membuat header layar penuh, tetapi untuk membantu Anda membawa desain header Anda lebih jauh, kami akan menunjukkan cara membuat menu hamburger animasi kustom juga. Ada beberapa hal penting tentang menu hamburger yang akan kita buat:

• Segera setelah pengunjung mengklik ikon hamburger, header layar penuh akan bertransisi, dan setiap item menu akan terbuka satu per satu, memberikan tampilan dan nuansa animasi khusus.
• Animasi khusus dipicu setiap kali menu dibuka
• Anda juga dapat menambahkan item dropdown ke item menu utama, item ini terbuka saat diklik dan ditutup secara otomatis segera setelah seseorang menutup menu atau mengklik item navigasi

Dengan kata lain, ini jelas merupakan tutorial header yang akan membantu Anda menambahkan tampilan dan nuansa tingkat lanjut ke situs web Anda. Anda juga dapat menata item sesuai keinginan dan Anda dapat mengunduh file template JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Header Global GRATIS

Untuk mendapatkan template tajuk global gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Buat Template Header Baru

Buka Divi Theme Builder & Tambahkan Template Header Global Baru

Mulailah dengan membuka Divi Theme Builder. Satu di sana, tambahkan tajuk global baru.

Mulai Membangun Dari Awal

Dan mulailah membangun desain header dari awal.

2. Bangun Logo & Ikon Hamburger

Pengaturan Bagian

Warna latar belakang

Setelah berada di dalam editor template, kita akan mulai dengan membuat logo dan ikon hamburger. Anda akan melihat sudah ada bagian di sana. Buka pengaturan bagian dan terapkan warna latar belakang transparan.

• Warna Latar Belakang: rgba(255,255,255,0)

Jarak

Pindah ke tab desain bagian dan hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Posisi

Kemudian, pergi ke lanjutan dan putar bagian tetap.

• Posisi: Tetap
• Lokasi: Kiri Atas
• Indeks Z: 13

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris, lanjutkan ke tab desain dan ubah pengaturan ukuran yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 95%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Elemen Utama CSS

Dan untuk memastikan logo dan ikon hamburger muncul bersebelahan pada ukuran layar yang lebih kecil, kita akan menyisipkan satu baris kode CSS di elemen utama baris.

display: flex;

Tambahkan Modul Gambar ke Kolom 1

Unggah Logo

Saatnya menambahkan modul, dimulai dengan Modul Gambar di kolom 1. Unggah logo pilihan Anda.

Perekat

Pindah ke tab desain dan ubah pengaturan ukuran berikutnya.

• Lebar Maks:
  • Desktop: 80px
  • Tablet & Ponsel: 50px

Posisi

Kemudian, reposisi seluruh modul.

• Posisi: Absolut
• Lokasi: Kiri Atas
• Offset Vertikal: 20px

Tambahkan Modul Teks ke Kolom 3

Struktur HTML di Kotak Konten

Di kolom ketiga, kita akan menambahkan Modul Teks. Kami akan menggunakan Modul Teks ini untuk membuat ikon hamburger kami. Mulailah dengan beralih ke tab teks di kotak konten dan masukkan tag HTML berikut:

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

Perekat

Ubah pengaturan ukuran modul berikutnya.

• Lebar: 80px
• Tinggi: 80px

Jarak

Kemudian, terapkan nilai padding khusus di berbagai ukuran layar.

• Bantalan Atas:
  • Desktop: 10px
  • Tablet & Ponsel: 17px
• Bantalan Bawah:
  • Desktop: 10px
  • Tablet & Ponsel: 17px
• Bantalan Kiri:
  • Desktop: 15px
  • Tablet & Ponsel: 30px
• Bantalan Kanan:
  • Desktop: 15px
  • Tablet & Telepon: 10px

Posisi

Reposisi modul ini juga.

• Posisi: Absolut
• Lokasi: Pojok Kiri Atas

3. Buat Menu Hamburger

Tambahkan Bagian Baru

Latar Belakang Gradien

Sekarang setelah kita memiliki logo dan ikon hamburger, kita dapat melanjutkan ke bagian berikutnya yang didedikasikan untuk membuat menu hamburger dan semua itemnya. Mulailah dengan menambahkan bagian baru, buka pengaturan bagian dan terapkan latar belakang gradien.

• Warna 1: #000000
• Warna 2: #11111
• Tipe Gradien: Linier
• Arah Gradien: 90 derajat
• Posisi Awal: 50%
• Posisi Akhir: 50%

Perekat

Terapkan tinggi minimum dan tinggi maksimum ke pengaturan ukuran berikutnya.

• Tinggi Min: 100vh
• Tinggi Maks: 100vh

Jarak

Kemudian, hapus semua padding bagian atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Meluap

Ubah juga overflow.

• Luapan Horisontal: Tersembunyi
• Luapan Vertikal: Otomatis

Posisi

Untuk memastikan menu dapat dibuka setiap saat, kami akan memposisikan ulang bagian di tab lanjutan.

• Posisi: Tetap
• Lokasi Top Center

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris, pindah ke tab desain dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Meluap

Lalu, buka tab lanjutan dan ubah overflow.

• Luapan Horisontal: Tersembunyi
• Luapan Vertikal: Otomatis

Posisi

Reposisi baris juga.

• Posisi: Absolut
• Lokasi Top Center

Pengaturan Kolom 1

Jarak

Selanjutnya, kita akan membuka pengaturan kolom 1 dari baris kita dan menerapkan beberapa nilai padding responsif kustom.

• Bantalan Atas:
  • Desktop: 24vh
  • Tablet & Telepon: 10vh
• Bantalan Bawah:
  • Desktop: 24vh
  • Tablet & Telepon: 5vh
• Padding Kiri: 13%
• Padding Kanan: 13%

Berbatasan

Kami juga akan menerapkan beberapa pengaturan perbatasan:

• Lebar Perbatasan Kanan:
  • Desktop: 2px
  • Tablet & Ponsel: 0px\
• Warna Batas Kanan: #191919
• Lebar Batas Bawah:
  • Desktop: 0px
  • Tablet & Ponsel: 2px
• Warna Batas Kanan: #191919

Pengaturan Kolom 2

Jarak

Kemudian, kita akan beralih ke kolom 2 dan menerapkan beberapa nilai padding kustom di sana juga.

• Bantalan Atas:
  • Desktop: 24vh
  • Tablet & Telepon: 5vh
• Bantalan Bawah:
  • Desktop: 24vh
  • Tablet & Telepon: 5vh
• Padding Kiri: 13%
• Padding Kanan: 13%

Tambahkan Modul Teks #1 ke Kolom 1

Tambahkan Konten H3

Saatnya menambahkan modul, dimulai dengan Modul Teks pertama di kolom 1. Tambahkan beberapa konten H3 pilihan Anda.

Pengaturan Teks H3

Pindah ke tab desain dan ubah pengaturan teks H3 sebagai berikut:

• Judul 3 Font: Montserrat
• Judul 3 Berat Font: Ultra Tebal
• Judul 3 Gaya Font: Huruf Besar
• Judul 3 Warna Teks: #ffffff
• Judul 3 Ukuran Teks
  • Desktop: 1vw
  • Tablet: 2.5vw
  • Telepon: 3.5vw
• Spasi Judul 3 Huruf: 5px

Jarak

Tambahkan beberapa margin bawah berikutnya.

• Margin Bawah: 5vh

Modul Teks Klon & Tempatkan Duplikat di Kolom 2

Setelah Anda menyelesaikan modul pertama ini, Anda dapat mengkloningnya sekali dan menempatkan duplikatnya di kolom 2.

Ubah Konten

Pastikan untuk mengubah konten dalam modul duplikat ini.

Tambahkan Modul Teks #2 ke Kolom 2

Struktur HTML di Kotak Konten

Untuk menampilkan item menu kami, termasuk item sub menu, kami akan menggunakan tab teks dari Modul Teks baru. Lanjutkan dan tambahkan Modul Teks baru ke kolom 1 dan masukkan HTML berikut:

<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>

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Montserrat
• Berat Font Teks: Tipis
• Warna Teks: #ffffff
• Ukuran teks:
  • Desktop: 2.7vw
  • Tablet: 4vw
  • Telepon: 6vw
• Spasi Surat Teks: 0.1em
• Tinggi Baris Teks: 1em

Pengaturan Teks Tautan

Ubah juga warna teks tautan.

• Warna Teks Lin: #ffffff

Pengaturan Teks Daftar Tidak Terurut

Kemudian, ubah pengaturan teks daftar tidak berurutan.

• Font Daftar Tidak Terurut: Montserrat
• Berat Font Daftar Tidak Terurut: Tebal
• Gaya Font Daftar Tidak Terurut: Huruf Besar
• Ukuran Teks Tidak Terurut:
  • Desktop: 1vw
  • Tablet: 2.5vw
  • Telepon: 3.5vw
• Tinggi Baris Daftar Tidak Terurut: 1.5em
• Tipe Gaya Daftar Tidak Terurut: Tidak Ada
• Posisi Gaya Daftar Tidak Terurut: Di dalam

Jarak

Dan selesaikan pengaturan modul dengan menambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 5%
• Padding Bawah: 5%

Modul Teks Klon untuk Membuat Variasi Tanpa Submenu

Setelah Anda menyelesaikan modul pertama, Anda dapat mengkloningnya sekali. Kami akan menggunakan duplikasi ini untuk membuat variasi item menu tanpa item sub menu.

Tinggalkan Submenu & Beralih Ikon

Untuk mengubah modul duplikat ini menjadi item menu biasa tanpa item submenu, gunakan struktur HTML ini sebagai gantinya:

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

Gunakan Kembali Kedua Jenis Item Menu

Setelah Anda memiliki kedua variasi item menu, Anda dapat menggunakan kembali keduanya sesuai dengan mengkloningnya dan mengubah kontennya.

Tambahkan Modul Teks #2 ke Kolom 2

Tambahkan Konten H4 & Paragraf ke Kotak Konten

Di kolom 2, kita akan menambahkan Modul Teks lain dengan beberapa konten H4 dan paragraf pilihan kita.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Alata
• Warna Teks: #cecece
• Ukuran teks:
  • Desktop: 0.8vw
  • Tablet: 2.4vw
  • Telepon: 3.4vw
• Spasi Huruf Teks: 1px
• Tinggi Baris Teks: 1.5em
• Warna Teks: Cahaya

Pengaturan Teks H4

Buat beberapa perubahan pada pengaturan teks H4 juga.

• Judul 4 Ukuran Teks:
  • Desktop: 1vw
  • Tablet: 3vw
  • Telepon: 4vw

Perekat

Kemudian, ubah lebar modul di pengaturan ukuran.

• Lebar: 48%

Elemen Utama CSS

Dan tambahkan satu baris kode CSS ke elemen utama modul. Baris kode CSS ini akan membantu kita menempatkan dua Modul Teks bersebelahan.

display: inline-block;

Modul Teks Klon #2

Ubah Salin

Setelah Anda menyelesaikan Modul Teks, Anda dapat mengkloningnya sekali dan mengubah konten yang sesuai.

Tambahkan Modul Ikuti Media Sosial ke Kolom 2

Tambahkan Jejaring Sosial Pilihan

Modul terakhir yang kita butuhkan dalam perancangan ini adalah Modul Ikuti Media Sosial di kolom 2. Tambahkan jejaring sosial pilihan Anda.

Hapus Warna Latar Belakang Setiap Jejaring Sosial Satu per satu

Hapus warna latar belakang setiap jejaring sosial satu per satu.

Jarak

Kemudian, kembali ke pengaturan modul umum dan terapkan beberapa margin atas.

• Margin Atas: 5vh

4. Tambahkan Fungsionalitas

Tambahkan Kelas CSS ke Modul Teks Ikon Hamburger

Sekarang setelah fondasi desain menu hamburger kami dibuat, kami sekarang dapat fokus pada penambahan fungsionalitas! Hal pertama yang harus Anda lakukan adalah membuka Modul Teks yang berisi ikon hamburger dan menambahkan kelas CSS berikut:

• Kelas CSS: buka lebar penuh

Tambahkan Kelas CSS ke Bagian #2

Kemudian, buka bagian menu hamburger, bagian #2, dan tambahkan kelas CSS berikut:

• Kelas CSS: menu lebar penuh

Tambahkan Kelas CSS ke Setiap Modul di Menu Lebar Penuh

Untuk membuat efek animasi stagger kustom, kita perlu menerapkan kelas CSS berikut ke setiap modul di bagian #2.

• Kelas CSS: efek sempoyongan

Tambahkan Kelas CSS Ekstra ke Item Menu

Tambahkan kelas CSS tambahan, yang disebut "main-menu-item", ke masing-masing item menu di kolom 1 juga.

• Kelas CSS: item menu utama efek terhuyung-huyung

Tambahkan Modul Kode ke Bagian #1

Untuk menerapkan fungsionalitas, kami akan menggunakan kode CSS dan JQuery khusus. Kami akan menempatkan kode ini di Modul Kode baru di kolom kedua baris kami di bagian #1.

Masukkan Kode CSS

Tambahkan kode CSS berikut ke Modul Kode di antara tag gaya seperti yang Anda lihat di layar cetak di bawah ini.

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

Masukkan Perpustakaan Anime.js

Lanjutkan dengan menambahkan perpustakaan JavaScript Anime menggunakan tag skrip seperti yang Anda lihat di layar cetak di bawah ini . Kami akan menggunakan perpustakaan yang luar biasa ini untuk membuat efek terhuyung-huyung di langkah berikutnya dari tutorial.

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

Masukkan Kode JQuery

Fungsionalitas klik di menu hamburger kami didukung oleh kode JQuery berikut. Pastikan Anda menempatkan kode ini di antara tag skrip seperti yang Anda lihat di layar cetak di bawah ini.

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

Aktifkan Kelas CSS Segera setelah Anda Menyelesaikan Desain Header Layar Penuh Anda

Last but not least, kami akan mengaktifkan kelas CSS di Modul Kode yang dapat Anda temukan di bagian pertama. Buka Code Module dan hilangkan tanda “/* */” di awal dan akhir kelas. Mengaktifkan kelas ini (dikombinasikan dengan beberapa kode JQuery yang sudah diaktifkan) akan memastikan bagian yang berisi item menu tidak langsung dimuat saat seseorang mengunjungi salah satu halaman Anda. Setelah Anda mengaktifkan kelas ini, bagian kedua pada halaman Anda akan hilang dari Visual Builder, tetapi Anda masih dapat mengaksesnya dalam Mode Wireframe atau mematikan kelas CSS jika Anda ingin membuat perubahan tambahan.

5. Simpan Perubahan Header & Pembuat Tema

Itu dia! Satu-satunya yang tersisa untuk dilakukan adalah menyimpan template dan Divi Theme Builder dan melihat hasilnya di situs web Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan header Divi Anda. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara membuat menu hamburger animasi khusus. Segera setelah pengunjung mengklik ikon hamburger, menu layar penuh bertransisi dan menampilkan item menu satu per satu, yang menghasilkan pengalaman pengguna yang indah. Anda juga dapat mengunduh file template JSON secara gratis! Jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.