Cara Membuat Menu Push Slide Down di Divi

Header besar dengan banyak tautan navigasi dapat menghabiskan banyak properti berharga di situs Anda (terutama paruh atas). Itulah mengapa menu popup dan slide-in menjadi semakin populer. Sebagian besar waktu, menu yang meluncur untuk melihat tetap berada di atas konten halaman, menyembunyikan elemen tertentu. Namun, menu push geser bekerja sedikit berbeda. Efek dorong geser unik karena menu meluncur dari atas halaman sekaligus mendorong konten halaman ke bawah sehingga tidak ada yang tersembunyi dari pandangan.

Dalam tutorial ini, kami akan menunjukkan cara membuat menu push geser dari awal menggunakan Divi Theme Builder. Setelah menu dibuat, itu menjadi alat serbaguna untuk semua jenis aplikasi karena Anda akan dapat mengisi bagian dengan konten apa pun yang Anda inginkan menggunakan Divi Builder.

Mari kita lakukan!

Sneak Peek

Berikut adalah tampilan singkat menu push geser yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, 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!

Untuk mengimpor tata letak bagian ke Divi Theme Builder Anda, navigasikan ke Divi Theme Builder.

Klik ikon portabilitas.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, template bagian akan muncul di Divi Theme Builder.

Langsung saja ke tutorialnya ya?

Membangun Menu Dorong Geser dengan Pembuat Tema Divi

Membuat Menu Global Baru

Untuk membuat menu, kita akan membuat header global baru di dalam Divi Theme Builder.

Arahkan ke Divi > Pembuat Tema.

Kemudian klik pada area “Tambahkan Header Global” di dalam Template Situs Web Default. Dari dropdown, pilih "Build Global Header".

Ini akan membawa Anda ke editor tata letak tajuk global.

Setelah Anda berada di Global Header Layout Editor, pilih opsi “Build From Scratch.

Membuat Menu Tekan

Elemen pertama yang akan kita bangun bersama adalah bagian menu push. Bagian ini akan menahan item menu yang akan beralih ke bawah dan ke atas saat mengklik tombol sakelar menu.

Pengaturan Bagian

Buka pengaturan bagian default dan perbarui pengaturan sebagai berikut:

Latar belakang

• Warna Latar Belakang: #1a1e36

Lapisan

• Padding: 0px atas, 0px bawah

Kelas CSS

Di bawah tab lanjutan, tambahkan Kelas CSS berikut yang akan digunakan nanti dalam kode JS kita.

• Kelas CSS: et-push-menu

CSS khusus (tablet)

Selanjutnya, kita perlu menyesuaikan ketinggian bagian di ponsel menggunakan ketinggian yang dihitung untuk mengakomodasi bilah header utama yang akan kita tambahkan. Ini pada dasarnya akan membuat bagian menjangkau ketinggian penuh jendela di ponsel saat pengguna mengaktifkan menu terbuka.

Tambahkan CSS khusus berikut ke Elemen Utama di tablet saja:

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

Tambahkan Baris 1

Setelah pengaturan bagian selesai, buat baris satu kolom di dalam bagian.

Pengaturan Baris 1

Kemudian perbarui pengaturan baris sebagai berikut:

Desain

• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 1280px
• Padding: 3vh atas, 3vh bawah
• Lebar Batas Bawah: 1px
• Warna Batas Bawah: rgba(255,255,255,0.2)

CSS khusus

Di bawah tab lanjutan, tambahkan CSS khusus berikut ke elemen utama:

Di bawah Desktop…

display:flex;
justify-content:center;
align-items:center;

Di bawah Tablet…

display:flex;
flex-direction:column;
align-items:center;

Pengaturan Kolom

Setelah pengaturan baris selesai, buka pengaturan untuk kolom dan tambahkan cuplikan CSS khusus ke elemen utama:

display:flex;
align-items:center;
justify-content:center;

Ini akan memusatkan isi kolom baik secara vertikal maupun horizontal.

Tambahkan Tombol

Sekarang kita siap untuk mulai menambahkan item menu kita menggunakan modul tombol. Mulailah dengan menambahkan tombol baru ke kolom.

Pengaturan Tombol

Kemudian perbarui pengaturan tombol sebagai berikut:

Isi

• Teks Tombol: Desain
• URL Tautan Tombol: # (ganti ini dengan URL khusus Anda nanti)

Desain

• Warna Teks Tombol: #ffffff
• Lebar Batas Tombol: 0px
• Font Tombol: Montserrat
• Berat Huruf Tombol: Berat
• Ikon Tombol: [pilihan Anda]
• Penempatan Ikon Tombol: Kiri

Menduplikasi Kolom

Sekarang untuk membuat tombol tambahan untuk menu, kita dapat menduplikasi kolom. Untuk desain ini, mari gandakan kolom 4 kali untuk memberi kita total 5 item menu/tombol. dalam baris lima kolom.

Tambahkan Baris 2

Setelah baris pertama selesai, kami siap untuk menambahkan baris tombol lain yang dapat digunakan untuk set item menu yang berbeda.

Untuk membuat baris berikutnya, duplikat baris 1.

Hapus Semua Kolom Kecuali Satu

Kemudian hapus semua kolom kecuali satu di dalam baris duplikat.

Pengaturan Baris 2

Perbarui pengaturan untuk Baris 2 sebagai berikut:

• Lebar Maks: 1080px
• Lebar Batas Bawah: 0px

Pengaturan Kolom

Kemudian tambahkan perbatasan ke kolom sebagai berikut:

• Lebar Batas Kanan: 1px
• Warna Batas Kanan: rgba(255,255,255,0.2)

Perbarui Pengaturan Tombol

Setelah kolom memiliki batas kanan, buka pengaturan untuk tombol dan perbarui yang berikut:

• Ukuran Teks Tombol: 14px
• Jarak Huruf Tombol: 2px
• Berat Huruf Tombol: Semi Tebal
• Gaya Font Tombol: TT
• Tampilkan Ikon Tombol: TIDAK

Gandakan Kolom

Seperti yang kita lakukan sebelumnya, mari kita menduplikasi kolom untuk membuat tombol dan kolom tambahan. Untuk desain ini, mari gandakan kolom 3 kali untuk memberi kita total 4 tombol di baris 4 kolom.

Menghapus Batas Kolom Terakhir

Karena kita tidak ingin kolom terakhir memiliki batas kanan, buka pengaturan untuk kolom 4 dan perbarui lebar batas:

• Lebar Batas Kanan: 0px

Membuat Bilah Tajuk Utama

Selanjutnya, kita akan membuat bagian untuk bilah header utama. Bilah tajuk ini akan tetap terlihat selalu dan akan menjadi tempat logo situs kami, CTA, dan tombol sakelar Menu kami.

Tambahkan Bagian

Sebelum menambahkan bagian baru, ada baiknya memperbarui label bagian sebelumnya untuk membaca "Bagian Menu Push".

Kemudian buat bagian baru di bawah bagian pertama.

Pengaturan Bagian

Sekarang perbarui label pada bagian baru untuk membaca "Bagian Header". Kemudian buka pengaturan bagian dan perbarui yang berikut:

Lapisan

• Padding: 0px atas, 0px bawah

Menambahkan baris

Setelah padding bagian ditambahkan, tambahkan baris tiga kolom ke bagian tersebut.

Pengaturan Baris

Buka pengaturan baris dan perbarui yang berikut:

Perekat

• Lebar Talang: 1
• Lebar: 90%
• Tinggi: 70px

Lapisan

• Padding: Padding: 0px atas, 0px bawah

CSS khusus

Di bawah tab lanjutan, tambahkan CSS Kustom berikut ke Elemen Utama:

display:flex;
align-items:center;

Ini akan memusatkan kolom di dalam baris secara vertikal.

Tambahkan Tombol

Untuk membuat CTA utama pada bagian header, kita dapat menggunakan tombol dari baris kedua di bagian atas. Salin tombol dari kolom 1 di baris 2 bagian atas dan tempel ke kolom 1 baris di bagian header.

Perbarui Pengaturan Tombol

Kemudian buka pengaturan tombol untuk tombol duplikat dan perbarui yang berikut:

• Teks Tombol: Daftar
• Ukuran Teks Tombol: 14px
• Warna Teks Tombol: #1a1e36
• Tampilkan Ikon Tombol: YA
• Ikon Tombol: Panah Kanan (lihat tangkapan layar)

Tambahkan Logo

Di kolom tengah, tambahkan modul gambar. Ini adalah bagaimana kita menambahkan logo situs secara dinamis.

Arahkan kursor ke kotak gambar dan klik ikon "Gunakan Konten Dinamis". Dari dropdown, pilih "Logo Situs".

Pengaturan Gambar

Kemudian, di bawah tab desain, perbarui yang berikut ini:

• Penjajaran Gambar: tengah
• Tinggi Maks: 55px

Tambahkan Ikon Hamburger Khusus

Kita bisa menggunakan ikon biasa melalui modul blurb sebagai toggle menu kita, tapi untuk tutorial ini, saya pikir kita akan menambahkan toggle menu kustom dengan efek transisi yang keren.

Tambahkan Modul Teks

Untuk membuat ikon menu, kita akan menggunakan modul teks dengan beberapa HTML khusus yang akan ditata dengan CSS eksternal.

Silakan dan tambahkan modul teks ke kolom 3.

Tambahkan HTML Modul Teks

Kemudian tambahkan HTML berikut ke konten modul teks:

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

Latar belakang

Berikan modul teks warna latar belakang:

• Warna Latar Belakang: #1a1e36

Desain Teks

Kemudian perbarui pengaturan desain sebagai berikut:

• Lebar: 70px
• Penyelarasan Modul: kanan
• Tinggi: 70px
• Padding: 20px atas, 20px bawah, 16px kiri, 16px kanan

Kelas CSS

Di bawah tab lanjutan, tambahkan Kelas CSS berikut:

• Kelas CSS: et-push-menu-toggle

Tambahkan Kode

Untuk membawa pulang fungsionalitas yang kami butuhkan agar menu push geser ini berfungsi, kami akan menambahkan CSS dan jQuery khusus kami ke modul kode.

Lanjutkan dan tambahkan modul kode ke kolom 3 di bawah modul teks.

Kemudian rekatkan kode berikut (penting: bungkus kode ini dalam tag gaya agar berfungsi dengan benar):

  .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #ffffff;
    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;
  }
  .line-2 {
    top: 10px;
  }
  .line-3 {
    top: 20px;
  }
  .et-push-menu-toggle.open .line-1 {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .et-push-menu-toggle.open .line-2 {
    display: none;
  }
  .et-push-menu-toggle.open .line-3 {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .et-push-menu {
    display:none;
  }
  .et-fb .et-push-menu {
    display:block;
  }
  .et-push-menu-toggle {
    cursor:pointer;
  }

Selanjutnya, salin dan tempel kode ini tepat di bawahnya (penting: bungkus kode ini dalam tag skrip agar berfungsi dengan benar):

(function($) {
  $(document).ready(function(){
    $('.et-push-menu-toggle').click(function(){
      $(this).toggleClass('open');
      $('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
    });
  });  
})( jQuery );

Perbarui Teks Tombol dan Tautan

Terakhir, kami dapat memperbarui semua tombol dengan teks tombol dan URL tautan yang diperlukan.

Itu dia!

Simpan Pengaturan

Jangan lupa untuk menyimpan tata letak dan pengaturan pembuat tema.

Hasil Akhir

Untuk melihat hasil akhir, lihat halaman langsung di situs Anda.

Membuatnya Lengket

Jika Anda ingin menu versi "lengket", yang perlu Anda lakukan hanyalah menambahkan potongan CSS berikut ke modul kode (di antara tag gaya ):

  header {
    position: sticky;
    top:0;
    z-index:9999;
  }
  #page-container {
    overflow-y: visible !important;
  }

Dan inilah hasilnya.

Pikiran Akhir

Saya harap Anda menikmati menu geser geser ini. Efeknya unik dan membuka pintu untuk header yang lebih kreatif.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!