Cara Membuat Menu Dropdown Bertingkat di Blogger dengan CSS

anaksmanda.com - Menu dropdown merupakan menu navigasi yang menampilkan daftar tautan tambahan ketika pengunjung mengarahkan kursor ke menu atau memfokuskannya melalui keyboard. Menu ini cocok digunakan untuk mengelompokkan kategori artikel, tutorial, software, dan halaman lainnya agar navigasi blog lebih rapi.

Pada tutorial ini, kalian akan mempelajari cara membuat menu navigasi dropdown bertingkat di Blogger menggunakan HTML dan CSS. Artikel ini juga menyediakan preview langsung di dalam postingan agar kalian bisa melihat hasilnya sebelum memasang kode pada template blog.

Apa Itu Menu Dropdown Bertingkat?

Menu dropdown bertingkat adalah navigasi yang memiliki menu utama dan submenu. Submenu dapat memiliki submenu tambahan sehingga tautan dapat dikelompokkan berdasarkan kategori yang lebih spesifik.

Contohnya, menu Tutorial memiliki submenu Blogger dan Web Desain. Menu Blogger kemudian dapat memiliki submenu tambahan seperti Template, HTML, dan CSS.

Kelebihan Menu Dropdown pada Blogger

• Navigasi lebih teratur: tautan dapat dikelompokkan berdasarkan kategori.
• Menghemat ruang: submenu tidak harus ditampilkan seluruhnya sejak awal.
• Mudah disesuaikan: nama menu, warna, dan alamat tautan dapat diubah.
• Tanpa jQuery: dropdown dasar pada tutorial ini menggunakan HTML dan CSS saja.
• Lebih sederhana: tidak membutuhkan pustaka JavaScript tambahan untuk efek dropdown dasar.

1. Preview Menu Dropdown Bertingkat

Coba demo berikut. Pada desktop, arahkan kursor ke menu Artikel atau Download untuk membuka submenu. Arahkan kursor ke Tutorial untuk melihat submenu tingkat berikutnya.

Preview interaktif: panah putih dibuat dengan CSS, bukan karakter teks. Pada layar kecil, submenu disusun vertikal agar lebih mudah dibaca.

Preview tersebut merupakan contoh menu yang ditampilkan langsung di artikel. Tautan menggunakan halaman ANAKSMANDA.COM sebagai contoh. Jika kalian menerapkannya pada blog lain, ubah alamat URL dan nama kategori sesuai kebutuhan.

2. Membuat Struktur HTML Menu

Struktur menu menggunakan elemen ul, li, dan a. Submenu ditempatkan di dalam elemen li dari menu induknya.

<!-- Struktur HTML menu dropdown --> <nav class="menu-dropdown"> <ul> <li><a href="/">Beranda</a></li> <li> <a href="#">Tutorial</a> <ul> <li><a href="/search/label/Blog">Blogger</a></li> <li><a href="/search/label/Software">Software</a></li> </ul> </li> </ul> </nav>

Daftar kedua merupakan submenu dari menu Tutorial. Untuk menambahkan submenu tingkat berikutnya, letakkan daftar ul baru di dalam item menu yang akan menjadi induknya.

3. Kode CSS untuk Dropdown

CSS berikut mengatur warna, jarak, posisi submenu, dan efek hover. Selector dibuat menggunakan kelas khusus agar tidak langsung mengubah seluruh daftar menu di template.

.menu-dropdown { background: #222; } .menu-dropdown ul { list-style: none; margin: 0; padding: 0; } .menu-dropdown li { position: relative; } .menu-dropdown a { display: block; padding: 12px 16px; color: #fff; text-decoration: none; } .menu-dropdown li ul { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; background: #333; } .menu-dropdown li:hover > ul, .menu-dropdown li:focus-within > ul { display: block; } .menu-dropdown a:hover, .menu-dropdown a:focus { background: #2196f3; }

Properti position: absolute membuat submenu muncul di atas konten lain tanpa mendorong tata letak. Sementara itu, :hover dan :focus-within membantu membuka submenu ketika menu diarahkan kursor atau menerima fokus keyboard.

4. Membuat Dropdown Bertingkat dan Ikon Panah

Untuk submenu tingkat kedua, posisinya diatur ke sebelah kanan menu induk. Ikon panah dibuat menggunakan border CSS agar tidak bergantung pada dukungan karakter font.

/* Posisi submenu tingkat kedua */ .menu-dropdown li li ul { top: 0; left: 100%; } /* Ruang untuk ikon panah */ .menu-dropdown .has-submenu > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Panah dropdown utama */ .menu-dropdown > ul > li.has-submenu > a::after { content: ""; display: inline-block; width: 7px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); margin-top: -4px; } /* Panah submenu ke samping */ .menu-dropdown li li.has-submenu > a::after { transform: rotate(-45deg); }

Tambahkan kelas has-submenu pada setiap item menu yang memiliki submenu. Jika kelas tersebut tidak dipasang, ikon panah tidak akan muncul pada item itu.

5. Membuat Menu Responsif untuk Ponsel

Dropdown yang muncul ke samping dapat sulit digunakan pada layar kecil. Media query berikut mengubah posisi submenu menjadi vertikal ketika lebar layar maksimal 600px.

@media (max-width: 600px) { .menu-dropdown > ul { display: block; } .menu-dropdown li ul, .menu-dropdown li li ul { position: static; min-width: 0; box-shadow: none; } .menu-dropdown li li.has-submenu > a::after { transform: rotate(45deg); } }

Aturan tersebut membuat submenu tersusun ke bawah pada layar kecil. Perlu diingat bahwa dropdown berbasis hover tidak selalu nyaman untuk layar sentuh. Jika menu akan digunakan sebagai navigasi utama, pertimbangkan tombol buka/tutup yang bisa diketuk pada perangkat mobile.

6. Cara Memasang Menu di Template Blogger

1. Masuk ke dashboard Blogger dan pilih blog yang akan diedit.
2. Buka menu Tema dan buat cadangan tema terlebih dahulu.
3. Buka fitur edit HTML jika ingin memasang CSS langsung ke template.
4. Tambahkan CSS pada bagian stylesheet tema, biasanya sebelum tag </b:skin>. Periksa struktur template yang digunakan.
5. Temukan bagian navigasi yang ingin diganti atau ditambahkan.
6. Masukkan struktur HTML menu pada lokasi tersebut.
7. Ubah setiap URL dan nama menu sesuai kategori blog kalian.
8. Simpan perubahan dan periksa tampilannya pada desktop serta ponsel.

Catatan: Struktur template Blogger berbeda-beda. Jangan menempelkan kode pada lokasi yang belum dipastikan benar. Jika tema sudah memiliki menu navigasi, lebih aman menyesuaikan menu tersebut daripada menambahkan navigasi kedua.

7. Mengatur Kotak Kode dengan Scrollbar Otomatis

Agar potongan kode yang panjang tidak memenuhi halaman, gunakan kotak kode berlatar terang dengan tinggi maksimal 550px. Scrollbar akan muncul ketika isi kode melebihi batas tersebut.

blockquote.code-snippet { max-height: 550px; overflow-y: auto; overflow-x: auto; box-sizing: border-box; padding: 16px; background: #fafafa; color: #24292f; border-left: 4px solid #3b82f6; border-radius: 6px; white-space: pre; }

Gunakan kelas code-snippet hanya untuk kotak yang berisi kode. Dengan begitu, kutipan biasa di dalam artikel tidak ikut mendapatkan gaya tersebut.

Pewarnaan sintaks pada contoh artikel ini menggunakan elemen HTML dengan kelas CSS. Jika ingin pewarnaan otomatis untuk berbagai bahasa pemrograman, diperlukan library syntax highlighter tambahan.

8. Tips Menggunakan Menu Dropdown

• Gunakan nama menu yang singkat dan mudah dipahami.
• Hindari terlalu banyak tingkat submenu agar pengunjung tidak kebingungan.
• Pastikan warna teks dan latar memiliki kontras yang baik.
• Gunakan URL yang benar dan sesuai dengan kategori tujuan.
• Uji menu menggunakan mouse, keyboard, dan layar sentuh.
• Buat cadangan tema sebelum mengubah template Blogger.

Baca Juga

• Download Aplikasi Pendukung Web Desain
• Cara Backup dan Setting Folder htdocs XAMPP
• Download Adobe Photoshop CS6
• Download Mozilla Firefox Terbaru
• Artikel Software Lainnya

Kesimpulan

Menu dropdown bertingkat membantu membuat navigasi blog lebih terorganisasi karena tautan dapat dikelompokkan ke dalam beberapa tingkat. Dengan HTML dan CSS, kalian dapat membuat dropdown dasar tanpa bergantung pada jQuery lama.

Preview langsung di artikel memudahkan pembaca mencoba tampilan sebelum memasang kode. Ikon panah CSS membantu menunjukkan menu yang memiliki submenu, sedangkan desain responsif dan kotak kode dengan scrollbar maksimal 550px membuat tutorial lebih nyaman dibaca.

Sesuaikan struktur menu, warna, dan URL dengan kebutuhan blog kalian. Selalu buat cadangan tema sebelum melakukan perubahan pada template Blogger.