Cara Membuat Menu Lengket yang Diperluas di Arahkan ke Arah dengan Divi

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang berkelanjutan, kami akan menunjukkan kepada Anda cara membuat menu lengket yang diperluas saat mengarahkan kursor menggunakan Paket Tata Letak Mekanik Divi. Kami akan menangani dua contoh desain berbeda yang dapat Anda buat ulang dari awal dan diterapkan ke semua jenis situs web yang Anda buat! Menu akan ditampilkan saat mengarahkan kursor pada ukuran layar desktop dan diaktifkan saat klik pada perangkat seluler.

Mari kita lakukan!

Pratinjau

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

Contoh 1

Desktop

Seluler

Contoh #2

Desktop

Seluler

Langkah Umum

Nonaktifkan Navigasi Tetap

Buka Opsi Tema Divi

Kami akan memulai dengan beberapa langkah umum. Langkah-langkah ini sama untuk kedua contoh dan diperlukan untuk mencapai hasil yang diinginkan.

Jika Anda berencana menggunakan menu lengket yang diperluas di bagian bawah halaman Anda, Anda mungkin ingin meninggalkan bilah menu utama di bagian atas. Untuk melakukan itu, Anda harus pergi ke opsi tema Divi.

Nonaktifkan Navigasi Tetap

Di sana, Anda ingin menonaktifkan opsi bilah navigasi tetap untuk memastikan tidak ada ruang tersisa di bagian atas halaman Anda.

• Bilah Navigasi Tetap: Dinonaktifkan

Sembunyikan Bilah Menu Utama di Halaman

Buka Pengaturan Halaman

Pindah ke halaman yang ingin Anda tambahkan menu tempel yang diperluas dan buka pengaturan halaman.

Tambahkan CSS Khusus

Sembunyikan menu utama dengan menambahkan baris kode CSS berikut ke halaman Anda.

#main-header {
display: none;
}

Tambahkan Bagian Baru ke Akhir Halaman

Apapun contoh yang ingin Anda buat ulang, beberapa langkah dasar tetap sama. Langkah pertama adalah menambahkan bagian reguler ke bagian bawah halaman.

Jarak

Buka pengaturan bagian dan hapus semua bantalan atas dan bawah khusus.

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

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Elemen Utama

Kami mengizinkan seluruh baris untuk menempel di bagian bawah halaman kami dengan menambahkan dua baris kode CSS ke elemen utama baris.

bottom: 0px;
position: fixed;

Indeks Z

Dan kami akan memastikan baris (dan Modul Teks yang kami tambahkan di langkah mendatang) tetap berada di atas semua konten halaman dengan meningkatkan indeks Z dalam pengaturan visibilitas baris.

• Indeks Z: 99

Tambahkan Modul Kode ke Kolom

Tambahkan Kode CSS Antara Tag Gaya

Bagian terakhir dari langkah umum adalah menambahkan Modul Kode ke baris baru. Kode CSS yang kami tambahkan di dalam Modul Kode ini akan membantu kami mencapai efek terbuka saat mengarahkan kursor. Rekatkan baris kode CSS berikut di dalam modul:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Buat Ulang Contoh #1

Tambahkan Modul Teks ke Kolom

Tambah isi

Sekarang setelah kita melalui semua langkah, kita dapat mulai berfokus pada dua contoh desain yang berbeda, dimulai dengan yang pertama! Tambahkan Modul Teks ke kolom baris Anda. Di kotak konten, kami menggunakan gaya paragraf untuk menampilkan salinan '≡ Menu'. Kami, kemudian, menempatkan semua item menu dalam daftar yang tidak berurutan. Kami juga akan menambahkan tautan ke masing-masing judul halaman satu per satu.

Warna Latar Default

Pindah ke pengaturan latar belakang modul dan ubah warna latar belakang.

• Warna Latar Belakang: #ffffff

Arahkan Warna Latar Belakang

Ubah warna latar belakang ini saat melayang.

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

Latar Belakang Gradien

Dan tambahkan latar belakang gradien default juga.

• Warna 1: rgba (255,255,255,0)
• Warna 2: #ffffff
• Posisi Akhir: 60%

Pengaturan Teks Default

Lanjutkan dengan membuka tab desain dan mengubah pengaturan teks.

• Font Teks: Khand
• Berat Font Teks: Tebal
• Warna Teks: #021827
• Ukuran Teks: 3vh
• Orientasi Teks: Tengah

Arahkan Pengaturan Teks

Ubah beberapa pengaturan teks saat mengarahkan kursor.

• Warna Teks: rgba(255,255,255,0)
• Ukuran Teks: 0vh

Pengaturan Teks Tautan

Kemudian, buka pengaturan teks tautan dan ubah warna teks tautan.

• Warna Teks Tautan: #000000

Pengaturan Teks Daftar Default

Pindah ke pengaturan teks daftar default dan gaya sesuka Anda. Pastikan Anda menggunakan '0px' untuk ukuran teks dalam status default.

• Font Daftar Tidak Terurut: Khand
• Gaya Font Daftar Tidak Terurut: Huruf Besar
• Penjajaran Teks Daftar Tidak Berurutan: Pusat
• Warna Teks Daftar Tidak Terurut: rgba(255,255,255,0)
• Ukuran Teks Daftar Tidak Terurut: 0px
• Tinggi Baris Daftar Tidak Terurut: 0em
• Posisi Gaya Daftar Tidak Terurut: Di dalam

Arahkan ke Pengaturan Teks Daftar

Kemudian, ubah beberapa nilai saat mengarahkan kursor untuk memungkinkan item menu muncul.

• Warna Teks Daftar Tidak Terurut: #000000
• Ukuran Teks Daftar Tidak Terurut: 2vh
• Tinggi Garis Tidak Terurut: 2.1em

Spasi Default

Buka pengaturan spasi berikutnya dan beri bentuk pada Modul Teks.

• Margin Kiri: 45vw (Desktop), 39vw (Tablet), 33vw (Telepon)
• Margin Kanan: 45vw (Desktop), 39vw (Tablet), 33vw (Telepon)
• Padding Atas: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)
• Padding Bawah: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)

Spasi Arahkan

Ubah nilai yang sama ini saat mengarahkan kursor.

• Margin Kiri: 14vw
• Margin Kanan: 14vw
• Padding Atas: 8vw
• Padding Bawah: 8vw

Perbatasan Default

Pindah ke pengaturan perbatasan dan pastikan setiap sudut membulat memiliki nilai '0px'.

Arahkan Perbatasan

Aktifkan opsi hover di sudut membulat dan ubah nilai kiri atas dan kanan atas.

• Kiri Atas: 50vw
• Kanan Atas: 50vw

Bayangan Kotak

Lanjutkan dengan memberi modul beberapa kedalaman menggunakan bayangan kotak. Ini akan memastikan menu tidak luput dari perhatian di halaman.

• Kekuatan Buram Bayangan Kotak: 1000ms
• Warna Bayangan: rgba (0,0,0,0.68)

Kelas CSS

Kami juga menambahkan kelas CSS ke modul.

• Kelas CSS: dt-menu

Transisi

Last but not least, kurangi durasi transisi dalam pengaturan transisi.

• Durasi Transisi: 100ms

Buat Ulang Contoh #2

Tambahkan Modul Teks ke Kolom

Tambah isi

Ke contoh kedua! Di sini, kita kembali akan menambahkan '≡ Menu' menggunakan gaya teks paragraf dan item menu menggunakan daftar yang tidak berurutan. Kami juga akan menambahkan tautan ke masing-masing item menu satu per satu.

Warna Latar Default

Pindah ke pengaturan latar belakang dan ubah warna latar belakang.

• Warna Latar Belakang: #ffffff

Arahkan Warna Latar Belakang

Ubah warna latar belakang saat melayang.

• Warna Latar Belakang: #f71535

Pengaturan Teks Default

Lalu, buka tab desain dan buat beberapa perubahan pada tampilan salinan paragraf.

• Font Teks: Khand
• Warna Teks: #021827
• Ukuran Teks: 3vh

Arahkan Pengaturan Teks

Ubah pengaturan ini saat mengarahkan kursor.

• Warna Teks: rgba(255,255,255,0)
• Ukuran Teks: 0vh

Pengaturan Teks Tautan

Pindah ke pengaturan teks dan ubah warna teks tautan.

• Warna Teks Tautan: #ffffff

Pengaturan Teks Daftar Default

Ubah juga pengaturan desain item daftar yang tidak diurutkan.

• Font Daftar Tidak Terurut: Khand
• Gaya Font Daftar Tidak Terurut: Huruf Besar
• Penjajaran Teks Daftar Tidak Berurutan: Pusat
• Warna Teks Daftar Tidak Terurut: rgba(255,255,255,0)
• Ukuran Teks Daftar Tidak Terurut: 0px
• Tinggi Baris Daftar Tidak Terurut: 0em
• Posisi Gaya Daftar Tidak Terurut: Di dalam

Arahkan ke Pengaturan Teks Daftar

Dan ubah beberapa nilai ini saat mengarahkan kursor.

• Warna Teks Daftar Tidak Terurut: #ffffff
• Ukuran Teks Daftar Tidak Terurut: 2vh
• Tinggi Baris Daftar Tidak Terurut: 2.1em

Spasi Default

Kemudian, buka pengaturan spasi dan beri modul beberapa ruang.

• Margin Kanan: 88vw (Desktop & Tablet), 71vw (Telepon)
• Padding Atas: 6vw (Desktop), 10vw (Tablet), 18vw (Telepon)
• Padding Bawah: 4vw (Desktop), 10vw (Tablet), 12vw (Telepon)
• Padding Kiri: 1vw

Spasi Arahkan

Ubah nilai pada hover.

• Margin Kanan: 59vw
• Padding Atas: 13vw
• Padding Bawah: 8vw
• Padding Kiri: 1vw
• Padding Kanan: 13vw

Berbatasan

Dan untuk membuat desain seperempat lingkaran ini, kita akan mengubah batas kanan atas di pengaturan batas.

• Kanan Atas: 50vw

Bayangan Kotak

Kami juga akan menambahkan bayangan kotak untuk membuat kedalaman pada halaman.

• Kekuatan Buram Bayangan Kotak: 1000px
• Warna Bayangan: rgba (0,0,0,0.68)

Kelas CSS

Kemudian, kita akan menambahkan kelas CSS di tab lanjutan.

• Kelas CSS: dt-menu

Transisi

Dan kurangi durasi transisi di tab lanjutan untuk membuat transisi cepat.

• Durasi Transisi: 100ms

Pratinjau

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

Contoh 1

Desktop

Seluler

Contoh #2

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat menu lengket yang diperluas menggunakan Paket Tata Letak Mekanik Divi. Kami telah menangani dua contoh desain berbeda yang dapat Anda buat ulang dan gunakan di semua jenis situs web yang Anda buat! Kami senang Anda menikmati inisiatif desain Divi yang sedang berlangsung ini, di mana kami mencoba memasukkan sesuatu yang ekstra ke dalam kotak peralatan desain Anda setiap minggu. Jika Anda memiliki pertanyaan atau saran, pastikan Anda 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.