Membuat Navbar/List Menu Dropdown Dan Responsive

Dalam dunia website kita tahu bahwa banyak sekali layout ataupun desain yang sangat bervariasi, salah satu contoh desain didalam website adalah menu, menu pada suatu website sangatlah banyak jenisnya, mulai dari desain menu standar, sidebar menu dan dropdown menu. Begitupun dalam hal pembuatannya kita bisa kombinasikan dengan menggunakan HTML 5 dan CSS 3 ataupun dengan penambahan kode jQuery sebagai animasinya. Nah, berbicara tentang desain menu, berikut ini akan saya share bagaimana cara membuat dropdown menu. Seperti yang kita ketahui dropdown menu merupakan desain menu yang mempunyai turunan atau multiple menu, biasanya ciri khas dari menu ini adalah ketika kita arahkan kursor terhadap salah satu menu yang tersedia akan menampilkan menu turunannya lagi kebawah.

Pada kasus ini saya akan membuat dropdown menu sederhana dengan HTML  dan CSS , buat kalian yang sedang belajar membuat menu alangkah baiknya untuk menyimak dan mengikuti langkah-langkahnya berikut ini

Setelah membuat navbar pada materi sebelumnya kita akan membuat navbara menu Dropdown dan membuat navbar Responsive Saat Menu Navbar Di perkecil akan menyesuaikan pada perangkat yang kita pakai sebagai contoh smartphone Langsung Saja Kita Buat.

Tambahkan Dropdown Yang kita buat yang saya lingkari dengan garis Merah

Lalu Tambahkan style Css drowpdown yang kita buat usahakan nama  class disamakan dengan nama yang kita buat pada css agar Style Css bisa dipanggil

Code Style Css Drowpdown

Hasil Yang Kita Buat Dari Code di atas

Selanjutnya Kita Akan membuat Navbar Responsive  

script code Pada Body Html Bila sebelumnya <ul> dan <li> kita hapus terlebih dahulu dan tambakan class baru <div class="topnav" id="myTopnav"> dan <i class="fa fa-caret-down"></i> <!------tambah-------> atau bisa langsung copy script di atas

Selanjutnya Membuat Style Css Topnav Responsive Script ada di bawah ini dan saya memberikan catatan pada style css
Lalu Langkah Kita Terakir Membuat JavaScriptnya Saya Tandahi dengan warna merah dan dan warna biru pada body untuk membuat myFunction berjalan dengan Javascript 

Hasilnya Adalah

1

2