Cara Membuat Tombol Menu Dropdown Menggunakan Modul Menu Fullwidth Divi

Tombol menu tarik-turun benar-benar dapat berguna saat mendesain situs web. Selain menu utama, ada area di situs yang mungkin memerlukan menu dropdown sub item. Kami melihat mereka digunakan untuk hal-hal seperti kategori posting blog, daftar, dan input formulir. Tetapi mereka bahkan dapat digunakan untuk ajakan bertindak utama.

Dalam tutorial ini, kami akan menunjukkan cara membuat tombol menu dropdown menggunakan modul menu fullwidth Divi. Untuk melakukan ini, pertama-tama kita akan membuat menu di WordPress. Kemudian kita akan menggunakan modul menu fullwidth Divi untuk menampilkan menu tersebut dengan gaya kustom menggunakan Divi builder dan sedikit CSS kustom. Hasilnya adalah tombol menu dropdown yang praktis dan elegan.

Mari kita mulai.

Sneak Peek

Berikut adalah tampilan cepat pada tombol menu dropdown yang akan kita buat dalam tutorial ini.

Desktop (Menu Turun Saat Melayang)

Tablet dan Telepon (Menu Turun Saat Klik)

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!

Berlangganan Saluran Youtube Kami

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder. CSS khusus telah ditambahkan ke modul kode di bagian terpisah di bagian bawah tata letak.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, jika Anda belum menginstalnya, instal dan aktifkan Tema Divi yang diinstal (atau Plugin Divi Builder jika tidak menggunakan Tema Divi). Kami akan menggunakan pembuat Divi di ujung depan untuk mendesain tombol menu tarik-turun.

Itu dia!

Membuat Menu di WordPress

Sebelum kita mulai membangun menu dropdown dengan Divi Builder, kita harus terlebih dahulu membuat menu WordPress yang ingin kita gunakan untuk modul menu fullwidth. Untuk melakukan ini, buka dasbor WordPress dan navigasikan ke Appearance > Menus. Kemudian buat menu baru dengan mengklik tautan buat menu baru, masukkan nama menu, dan klik tombol “Buat Menu”.

Untuk saat ini Anda dapat membuat beberapa tautan khusus dengan "#" sebagai pengganti url bersama dengan teks tautan.

Susun item menu sehingga item menu tingkat atas memiliki teks tautan "Pelajari Lebih Lanjut" dengan tiga item submenu di bawahnya.

Setelah itu pastikan Anda menyimpan menu tersebut.

Cara Membuat Tombol Menu Dropdown dengan Modul Menu Fullwidth Divi

Setelah menu dibuat, kita dapat mulai mendesain tombol menu dropdown dengan Divi. Untuk memulai, buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Membuat Konten Mock

Pertama, tambahkan satu baris kolom ke bagian reguler default.

Tambahkan Modul Teks

Kemudian tambahkan modul teks ke baris dengan konten berikut:

<h1>Dropdown Menu Button</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Setelah itu, perbarui pengaturan desain sebagai berikut:

Bagian Padding

Selanjutnya, perbarui pengaturan bagian dengan yang berikut:

• Padding: 0px bawah

Spasi Baris dan Batas

Setelah padding bagian diperbarui, buka pengaturan baris dan beri baris beberapa padding dan sedikit batas.

• Padding: 10vw atas, 10vw bawah, 5vw kiri, 5vw kanan
• Lebar Perbatasan: 1px

Membuat Tombol Menu Dropdown

Untuk membuat tombol menu dropdown, kita akan menggunakan modul menu fullwidth. Ini akan memungkinkan kita untuk menambahkan menu yang kita buat sebelumnya.

Menambahkan Menu Lebar Penuh

Untuk membuat modul menu lebar penuh, tambahkan bagian lebar penuh baru di bawah bagian reguler saat ini.

Kemudian tambahkan modul menu lebar penuh ke baris.

Dalam popup pengaturan menu lebar penuh (di bawah konten), gunakan dropdown untuk memilih menu yang ingin Anda tampilkan. Ini harus menjadi menu yang sama yang kita buat sebelumnya bernama "menu tombol dropdown".

Kemudian keluarkan warna latar belakang putih default untuk menu.

Setelah Anda menambahkan menu dengan modul menu lebar penuh, simpan pengaturannya. Kita akan kembali ke modul ini sebentar lagi untuk menyelesaikan desain. Tapi untuk saat ini, kita akan menambahkan latar belakang ke bagian fullwidth.

Perbarui desain Bagian Lebar Penuh

Buka pengaturan bagian lebar penuh dan perbarui yang berikut ini:

• Warna Kiri Gradien Latar Belakang: #0047d6
• Warna Kanan Gradien Latar Belakang: #45b2ff

• Lebar Maks: 240px
• Perataan Bagian: tengah

Saya mengatur lebar maksimum bagian ke 240px karena ini akan cocok dengan lebar lebar menu dropdown default di Divi. Ini juga merupakan ukuran yang bagus untuk tombol di desktop dan seluler.

• Sudut Bulat: 5px

Di bawah tab lanjutan, tambahkan Kelas CSS, overflow, dan Z Index berikut.

• Kelas CSS: tombol tarik-turun
• Luapan Horisontal: terlihat
• Overflow Vertikal: terlihat
• Indeks Z: 14

Kelas CSS diperlukan agar kita dapat menargetkan CSS eksternal kita ke bagian ini nanti saja. Overflow perlu diatur agar terlihat sehingga kita dapat melihat menu dropdown. Dan Indeks Z akan membantu menjaga dropdown tetap di atas konten lain di halaman.

Desain Menu Lebar Penuh

Sekarang kita siap untuk mendesain modul menu fulwidth. Buka pengaturan modul menu lebar penuh dan perbarui yang berikut:

• Buat Tautan Menu Lebar Penuh: YA
• Warna Teks Menu Dropdown: #ffffff
• Warna Teks Menu Seluler: #ffffff
• Perataan Teks: Tengah
• Warna Latar Menu Dropdown: #45b2ff
• Warna Garis Menu Dropdown: #ffffff
• Warna Latar Menu Seluler: #45b2ff

• Font Menu: Encode Sans Semi Condensed
• Berat Font Menu: Semi Tebal
• Warna Teks Menu: #ffffff
• Ukuran Teks Menu: 16px
• Spasi Huruf Menu: 2px
• Animasi Menu Dropdown: Perluas

Memposisikan Tombol Dropdown

Untuk membuat tombol tumpang tindih dengan batas bawah, kita perlu menambahkan margin atas negatif tepat setengah tinggi tombol.

• Margin: -40.5px atas

Hampir sampai

Inilah hasilnya sejauh ini…

Seperti yang Anda lihat, ruang hover belum menempati seluruh area tombol dan menu tarik-turun masih ada di sebelah kanan. Untuk memperbaikinya, kita dapat menambahkan beberapa CSS khusus.

Menambahkan CSS Khusus

Sebelum menambahkan CSS khusus, pastikan Anda memiliki "tombol tarik-turun" ID CSS yang ditambahkan ke bagian lebar penuh (bukan modul).

Tanpa ID CSS, CSS di bawah ini tidak akan berfungsi.

Untuk menambahkan CSS khusus, buka pengaturan halaman dan rekatkan kode berikut ke dalam area input CSS Khusus.

.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
  padding-top: 0px !important;
}

.dropdown-button .fullwidth-menu li > a {
  padding-bottom: 0px;
  line-height: 81px;
}

.dropdown-button .fullwidth-menu li li a {
  padding: 6px 0px;
  line-height: 1.6em;
}

.dropdown-button .et_mobile_menu li a:hover, .nav ul li a:hover, .dropdown-button .fullwidth-menu a:hover {
  opacity: 1;
}

.dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {
  padding: 0 0 !important;
}

.dropdown-button .fullwidth-menu li {
  display: block;
}

.dropdown-button .fullwidth-menu .menu-item-has-children > a:first-child:after {  
  right: 20px;
}

Ini hasil akhirnya

Menyesuaikan Menu di Ponsel

Saat ini menu akan beralih ke versi seluler dengan ikon hamburger yang dapat diklik yang mengaktifkan dan menutup menu seluler. Berikut adalah tampilannya.

Untuk memperbaiki menu agar cocok dengan versi desktop, kita perlu menambahkan beberapa CSS khusus. Buka pengaturan halaman dan tambahkan CSS khusus berikut tepat di bawah css yang kami tambahkan saat ini.

@media (max-width: 981px){
  .dropdown-button .et_pb_fullwidth_menu .et_pb_row {
    width: 100%;
    }
  .dropdown-button .mobile_menu_bar {
    height: 81px;
  }
  .dropdown-button .mobile_menu_bar:before {
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #ffffff!important;
    letter-spacing: 2px !important;
    content: "Learn More";
    line-height: 81px;
    top: 0px;
}
  .dropdown-button .mobile_menu_bar:after{
    position: absolute;
    line-height: 81px;
    font-family: ETmodules;
    font-size: 20px;
    font-weight: 800;
    content: "3";
    padding-left: 20px;
    color: #ffffff;
}   
  .dropdown-button .et_first_mobile_item > a {
    display: none;
  }

}

CSS di atas membuat area yang dapat diklik mencakup lebar penuh dan tinggi bagian/tombol. Itu juga menggantikan ikon hamburger dengan beberapa teks dan ikon panah yang cocok dengan versi desktop. Ini dilakukan dengan menggunakan elemen pseudo :before dan :after. Dengan cara ini kita bisa menjaga fungsionalitas default dari menu seluler di tempatnya.

Saat ini, konten teks untuk tombol tarik-turun seluler bertuliskan "Pelajari Lebih Lanjut". Tetapi kita dapat mengubahnya dengan memperbarui baris CSS berikut di bawah elemen pseudo :before untuk bilah menu seluler:

content: "Learn More";

Misalnya, jika Anda ingin membaca "Menu", Anda akan mengubah baris CSS menjadi berikut:

content: "Menu";

Hasil Akhir

Berikut adalah hasil akhirnya.

Desktop (Menu Turun Saat Melayang)

Tablet dan Telepon (Menu Turun Saat Klik)

Sub Item Tambahan

Dan Anda bahkan dapat menambahkan item sub menu juga! Cukup perbarui menu di halaman editor menu dan Anda sudah siap.

Pikiran Akhir

Membuat tombol menu tarik-turun menggunakan modul menu lebar penuh Divi melibatkan beberapa langkah penting. Pertama, kita buat menu di WordPress yang ingin kita tarik ke dalam modul. Kemudian kami menggunakan pembangun Divi untuk dan dan menata modul menu lebar penuh sesuai keinginan kami. Kemudian kami menambahkan beberapa CSS khusus untuk memoles desain baik di desktop maupun seluler. Hasilnya adalah menu tarik-turun yang indah (dan berguna) yang digunakan saat mengarahkan kursor ke desktop dan saat klik untuk seluler. Mudah-mudahan, Anda akan menemukan ini menjadi tambahan yang berguna untuk kotak peralatan desain Anda.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!