Bangun Menu Mega dengan Ultimenu dan Bootstrap di Drupal 8

Salah satu pelanggan kami bertanya bagaimana membuat menu mega di Drupal 8.

Menu mega adalah menu dengan navigasi multi-kolom. Mereka dengan cepat menjadi tren dalam desain web.

Modul Ultimenu memungkinkan Anda untuk memasukkan blok Drupal ke dalam menu. Anda dapat dengan mudah menggunakannya untuk membangun tata letak menu yang cukup rumit.

Dalam tutorial ini, Anda akan belajar bagaimana membangun menu mega sederhana menggunakan modul Ultimenu dan Bootstrap.

Pelanggan membidik membangun mega menu yang mirip dengan yang ada pada gambar di bawah ini:

Menu drop-down mega harus memiliki lebar 100%. Konten mereka harus berupa blok Drupal.

Pendekatan Ultimenu

Modul Ultimenu menghasilkan blok untuk setiap menu yang Anda tambahkan di halaman menu instalasi Drupal Anda (admin/struktur/menu).

Anda dapat menempatkan blok ini di layar tata letak Blok seperti blok lainnya. Modul mengubah item menu menjadi wilayah dinamis di halaman tata letak blok.

Dengan begitu Anda dapat memasukkan blok (blok khusus, tampilan, dll) ke dalam wilayah ini.

Sebuah blok yang berisi daerah yang berisi blok:

Langkah 1. Instal Modul

• Instal modul dengan komposer:

composer require drupal/ultimenu

• Setelah mengunduh, klik Perpanjang dan aktifkan modul. Tidak diperlukan ketergantungan lebih lanjut:

Langkah 2. Buat menunya

• Klik Struktur > Menu .
• Cari Navigasi Utama
• Klik menu Edit .

• Klik tombol Tambahkan tautan
• Tambahkan item menu tingkat pertama:

Tautan Perjalanan menunjuk ke route:<nolink> . Elemen induk ini hanya ada untuk mengandung elemen lain:

Langkah #3. Konfigurasikan blok Ultimenu

• Klik Struktur > Ultimenu .
• Tab pilih Navigasi utama di blok Ultimenu vertikal
• Klik Simpan konfigurasi :

• Klik wilayah Ultimenu.
• Pilih Ultimenu:utama: Perjalanan

Ultimenu akan membuat wilayah ini secara dinamis di halaman Tata Letak Blok , sehingga Anda dapat menempatkan blok di dalamnya.

• Klik Simpan Konfigurasi :

Tab pernak-pernik Ultimenu memiliki opsi konfigurasi tambahan. Saya tidak akan memeriksa salah satu opsi ini. Harap baca dokumentasi modul untuk memahami cara kerja opsi ini, terutama jika Anda membuat situs multibahasa.

Langkah #4. Blok Gambar

Untuk menempatkan gambar di blok, Anda perlu membuat jenis blok khusus dengan bidang Gambar .

• Klik Struktur > Tata letak blok > Pustaka blok khusus > Jenis blok .
• Klik tombol Tambahkan jenis blok khusus :

• Berikan jenis blok nama yang tepat.
• Klik Simpan:

• Klik Kelola bidang.
• Hapus bidang Badan .
• Klik Tambahkan bidang.
• Tambahkan bidang Gambar .
• Simpan dengan default.
• Klik Kelola tampilan.
• Sembunyikan label Blok :

• Klik Struktur > Tata letak blok > Pustaka blok khusus > Tambahkan blok khusus :

• Klik Blokir dengan Gambar :

• Unggah gambar.
• Klik Simpan:

Langkah #5. Blok tautan

Ada banyak cara untuk mendapatkan blok dengan tautan dalam empat kolom, misalnya dengan Tampilan.

Saya sedang mengerjakan subtema Bootstrap dalam tutorial ini. Saya akan menggunakan blok dasar dengan markup dan kelas Bootstrap.

Lihat tutorial ini untuk mempelajari cara membuat subtema Bootstrap di Drupal.

• Klik Tambahkan blok khusus sekali lagi.
• Pilih Blok dasar kali ini.
• Beri nama yang tepat untuk blok tersebut.
• Pilih Full HTML sebagai format teks di editor.
• Klik tombol Sumber .
• Rekatkan kode berikut di jendela editor:

 <div class="row"> <div class="col-sm-3"> <h3>Top destinations</h3> <ul> <li><a href="#">North America</a></li> <li><a href="#">Latin America</a></li> <li><a href="#">Middle East</a></li> <li><a href="#">Europe</a></li> <li><a href="#">Africa</a></li> </ul> </div> <div class="col-sm-3"> <h3>Editor's choice</h3> <ul> <li><a href="#">Best Hotel Deals</a></li> <li><a href="#">Cruise Deals</a></li> <li><a href="#">City Breaks</a></li> <li><a href="#">Activities</a></li> <li><a href="#">Culture</a></li> </ul> </div> <div class="col-sm-3"> <h3>City breaks</h3> <ul> <li><a href="#">Paris</a></li> <li><a href="#">Hong Kong</a></li> <li><a href="#">Rome</a></li> <li><a href="#">London</a></li> <li><a href="#">Tokyo</a></li> </ul> </div> <div class="col-sm-3"> <h3>Custom menu</h3> <ul> <li><a href="#">Disclaimer</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Advertisement</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div>

• Klik Simpan.

Langkah #6. Tempatkan blok Ultimenu

• Klik Struktur > Tata letak blok .
• Nonaktifkan blok Navigasi Utama default.
• Tempatkan Ultimenu: Navigasi utama di wilayah Navigasi (dapat dilipat).
• Hapus centang Tampilkan judul .
• Klik Simpan blok .

Langkah #7. Tempatkan balok di wilayah "Perjalanan"

• Gulir ke bawah ke bagian bawah halaman.

Anda akan melihat wilayah yang dihasilkan secara dinamis yang Anda tetapkan saat mengonfigurasi Ultimenu Anda.

• Klik Tempatkan blok :

• Tempatkan blok kustom gambar di wilayah ini.
• Hapus centang Tampilkan judul.
• Klik Simpan blok.
• Ulangi proses dengan blok markup Bootstrap :

• Atur ulang urutan blok jika diperlukan.
• Klik Simpan blok :

Sekarang pergi ke halaman depan situs Anda dan lihat menu. Diperlukan beberapa tweak CSS.

Langkah #8. CSS

Secara default, file library subtema Anda menunjuk ke file style.css di dalam folder css/ di dalam subtema Bootstrap Anda.

• Tambahkan kode berikut ke file itu:

 /* Google fonts */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); /* Menu Links */ .ultimenu__link { text-transform: uppercase; font-family: 'Roboto', sans-serif; color: #000; font-size: 1.1em; display: inline-block; font-weight: 700; padding: 0.8em; } .has-ultimenu:hover { background-color: #FFF; } /* Image Block */ #block-megamenuimage { width: 100%; } #block-megamenuimage img { width: 100%; } /* Links block */ #block-multicolumnblock { width: 100%; } #block-multicolumnblock h3 { text-transform: uppercase; font-family: 'Roboto', sans-serif; background: #000; color: beige; font-size: 1em; display: inline-block; font-weight: 700; padding: 0.8em; border-radius: 10px; } #block-multicolumnblock li { list-style: none; border-top: 0.5px dashed #333; } #block-multicolumnblock li:last-child { border-bottom: 0.5px dashed #333; } #block-multicolumnblock li a { text-decoration: none; color: #333; display: block; line-height: 2.5em; }

Sekarang Anda seharusnya sudah memperhatikan cara mengubah menu sendiri:

Ringkasan

Anda baru saja mempelajari cara membuat megamenu di Drupal menggunakan modul Ultimenu, Bootstrap, dan pendekatan “blok Drupal” yang mudah dipahami.

Terima kasih sudah membaca!