Tombol menu tarik-turun bisa sangat berguna saat mendesain situs jaringan. Selain menu utama, area tertentu di situs mungkin memerlukan menu drop-down yang terdiri dari sub-item. Kami melihat mereka digunakan untuk hal-hal seperti kategori posting blog, daftar, dan entri blog. bentuk. Tetapi mereka bahkan dapat digunakan untuk ajakan bertindak.

Dalam tutorial ini, kami akan menunjukkan cara membuat tombol menu drop-down menggunakan modul menu lebar penuh Divi. Untuk melakukan ini, pertama-tama kita akan membuat menu di WordPress. Kami kemudian akan menggunakan modul menu lebar penuh Divi untuk menampilkan menu ini dengan gaya khusus menggunakan pembuat Divi dan sedikit CSS khusus. Hasilnya adalah tombol menu drop-down yang praktis dan bergaya.

Mari kita mulai.

penelitian

Berikut ini ikhtisar tombol menu tarik-turun yang akan kami integrasikan ke dalam tutorial ini.

Menu tarik-turun ikhtisar

Apa yang Anda butuhkan untuk memulai

Untuk memulai, jika Anda belum melakukannya, instal dan aktifkan Tema Divi diinstal (atau plugin Divi Builder jika Anda tidak menggunakan Tema Divi). Kami akan menggunakan pembuat Divi di awal untuk mendesain tombol menu tarik-turun.

Itu dia !

Buat menu di WordPress

Sebelum kita mulai membuat menu dropdown dengan Divi Builder, pertama-tama kita perlu membuat menu WordPress yang ingin kita gunakan untuk modul menu lebar penuh. Untuk melakukan ini, buka dasbor WordPress dan buka 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 link kustom dengan "#" sebagai placeholder untuk URL bersama dengan teks link.

Susun item menu sehingga item menu tingkat atas memiliki link "Pelajari Lebih Lanjut" dengan tiga item submenu.

Setelah itu, pastikan untuk menyimpan menu.

Cara membuat tombol menu drop-down dengan modul menu full-lebar Divi

Setelah menu dibuat, kita dapat mulai mendesain tombol menu drop-down dengan Divi. Untuk memulai proyek, buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di front-end (pembangun visual).

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

Buat konten palsu

Pertama, tambahkan baris dari satu kolom ke bagian standar default.

Tambahkan modul teks

Kemudian tambahkan modul teks ke baris dengan konten berikut:

Menu Divi Konten Anda ditempatkan di sini. Edit atau hapus teks ini sebaris atau di modul Pengaturan konten. Anda juga dapat mengatur gaya setiap aspek konten ini dalam pengaturan Desain modul dan bahkan menerapkan CSS khusus ke teks ini dalam modul Pengaturan lanjutan.

Kemudian perbarui parameter desain sebagai berikut:

Bagian padding

Kemudian, perbarui pengaturan bagian dengan item berikut:

  • Padding: 0px ke bawah

Bagian divi margin rendah

Penspasian garis dan batas

Setelah isian bagian diperbarui, buka pengaturan garis dan berikan isian dan sedikit batas.

  • Pelapis: 10vw di atas, 10vw di bawah, 5vw di kiri, 5vw di kanan, XNUMXvw di kanan
  • Lebar perbatasan: 1px

Konfigurasi bagian modul Divi

Membuat tombol menu drop-down

Untuk membuat tombol menu drop down, kita akan menggunakan modul menu lebar penuh. Ini akan memungkinkan kita untuk menambahkan menu yang telah dibuat sebelumnya.

Menambahkan menu lebar penuh

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

Kemudian tambahkan modul menu lebar-penuh ke baris.

Di jendela pop-up pengaturan menu lebar penuh (di bawah Konten), gunakan menu drop-down untuk memilih menu yang ingin Anda tampilkan. Ini harus menjadi menu yang sama yang kita buat sebelumnya bernama "menu tombol drop down".

Kemudian, hapus warna latar belakang putih default untuk menu.

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

Perbarui desain bagian lebar penuh

Buka pengaturan untuk bagian lebar penuh dan perbarui yang berikut:

  • Gradien latar belakang kiri: # 0047d6
  • Warna gradien latar belakang kanan: # 45b2ff

  • Lebar maksimum: 240px
  • Bagian Alignment: pusat

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

  • Sudut membulat: 5px

Pada tab Advanced, tambahkan Kelas CSS, Overflow, dan Indeks Z berikut.

  • Kelas CSS: tombol tarik turun
  • Overflow horisontal: terlihat
  • Overflow vertikal: terlihat
  • Indeks Z: 14

Kelas CSS diperlukan agar kita dapat menargetkan CSS eksternal kita pada bagian ini nanti. Overflow perlu diatur ke terlihat sehingga kita bisa melihat menu drop-down. Dan indeks Z akan membantu Anda menjaga drop-down di atas semua konten lain di halaman.

Pengaturan parameter bagian divi
Rancang menu Fulwidth

Kami sekarang siap untuk mendesain modul menu Fulwidth. Buka pengaturan modul menu lebar-penuh dan perbarui yang berikut ini:

  • Buat tautan menu lebar-lebar: YES
  • Warna teks tarik-turun: #ffffff
  • Warna teks menu seluler: #ffffff
  • Penyelarasan teks: pusat
  • Warna latar belakang menu tarik-turun: # 45b2ff
  • Warna dari baris menu drop-down: #ffffff
  • Warna latar belakang menu: #45b2ff

  • Menu Font: Encode Tanpa Semi Condensed
  • Berat Menu Font: Semi Bold
  • Warna teks menu: #ffffff
  • Ukuran teks menu: 16px
  • Penentuan jarak menu: 2px
  • Animasi menu drop-down: Buka

Font modul menu layar penuh divi

Posisikan tombol drop-down

Agar tombol tumpang tindih dengan batas bawah, kita perlu menambahkan margin atas negatif yang persis setengah ketinggian tombol.

  • Margin: -40.5px tinggi

Pengaturan bagian menu lebar penuh divi

Seperti yang Anda lihat, ruang hover belum menempati seluruh area tombol dan menu drop-down masih ada di sebelah kanan. Untuk mengatasi masalah ini, kita dapat menambahkan CSS khusus.

Menambahkan CSS khusus

Sebelum menambahkan CSS khusus, pastikan untuk menambahkan "drop down" ID CSS 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 kotak input CSS kustom.

.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important; }. tombol-dropdown .fullwidth-menu li> a {padding-bottom: 0px; tinggi garis: 81px; }. tombol-dropdown .fullwidth-menu seperti {padding: 6px 0px; tinggi garis: 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; }. tombol-dropdown .fullwidth-menu li {display: block; } .dropdown-button .fullwidth-menu .menu-item-has-children> a: first-child: after {right: 20px; }

Css menyesuaikan halaman divi

Inilah hasil akhirnya

Animasi menu drop-down Divi

final pikiran

Membuat tombol menu drop-down menggunakan modul menu lebar-penuh Divi melibatkan beberapa langkah utama. Pertama kita buat menu di WordPress yang ingin kita integrasikan ke dalam modul. Kemudian kami menggunakan pembuat Divi untuk dan memberi gaya modul menu lebar penuh sesuai keinginan kami. Kemudian kami menambahkan CSS khusus untuk memoles desain di desktop dan seluler. Hasilnya adalah menu drop-down yang indah (dan berguna) yang diluncurkan untuk desktop hover dan klik seluler. Semoga ini merupakan tambahan yang berguna untuk perangkat desain Anda.

Pin It pada Pinterest