Membuat Menu Dropdown CSS

dropdown

Menu Dropdown CSS digunakan untuk menampilkan menu yang bertingkat, artinya didalam menu terdapat menu lagi atau biasa disebut dengan submenu.
Untuk membuatnya saya rasa relatif mudah, kita tinggal memanfaatkan tag list yang ada pada html untuk membuat menu dropdown css.

Untuk membuat menu menggunakan tag list pada html biasanya kita akan menuliskannya seperti ini

Maka dari kode diatas akan tercipta 5 buah menu. Untuk membuat sebuah menu memiliki menu lagi atau submenu, kita buat lagi kode list diatas didalam list diatas. Terdengar membingungkan haha 😀 listception.
Agar tidak bingung silahkan lihat kode dibawah ini. Perhatikan pada baris yang saya tandai

Naah… dengan modal kode diatas kita bisa membuat sebuah menu dropdown css, tinggal kita bermain-main dengan CSS-nya.

Tampilan dibrowser yang pertama kali kamu dapatkan adalah seperti ini
Menu Dropdown CSS

Hmmm… sangat tidak berseni sekali
Kalau begitu merupakan ugas kita untuk membuatnya berseni. Tambahkan kode css dibawah ini dan lihat perubahannya

Menu Dropdown CSS
Walah malah lebih semrawut 😛

Untuk submenu perlu kita sembunyikan, caranya adalah dengan menmbahkan kode css berikut

3
Sudah agak lumayan sekarang..

Next adalah mempercantik link menu. Kita atur jenis font-nya, kita atur warna background, warna text dan juga lebar dari masing-masing kotak menu menggunakan padding.

Bagian display:block sangat penting, karena tanpa ini padding tidak akan bekerja secara sempurna

Sekalian juga tambahkan kode berikut supaya background menu berubah menjadi warna hitam ketika kursor sedang berada diatasnya

Dan berikut menu dropdown css kita yang hampir jadi :D. Sudah enak dipandang mata
4

Selanjutnya adalah membuat si submenu yang tadi kita sembunyikan muncul ketika kursor berada diatas menu parent-nya. Untuk mencapai hal tersebut kita gunakan kode berikut

5

Masih sedikit agak kacau. Mari kita sulap supaya rapi dengan menambahkan kode terakhir berikut ini

Adapun hasilnya adalah seperti ini 😀
6

Sip sudah jadi sekarang menu dropdown css kita 😀
Kalau suka dengan tutorialnya silahkan like dan share di FB hehee…

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

One thought on “Membuat Menu Dropdown CSS

Leave a Reply

Your email address will not be published. Required fields are marked *