Cara Membuat Menu Dropdown Web Design

Pada kesempatan kali ini saya akan membahas mengenai membuat dropdown menu secara singkat, yaitu dengan menggunakan tools yang sudah tersedia, contohnya cssmenumaker.com. Pada tools ini kita akan sangat mudah membuat menu dengan memilih style yg kita suka dan pada akhir step akan diberikan file html dan juga css yang dapat kita gunakan.

Apabila ingin membuat design menu responsive yang dapat berjalan pada aplikasi mobile juga dapat membaca postingan berikut : Konsep Responsive Menu Web Design atau dapat juga belajar dari kursusan apabila ingin mendalami konsep dasar dari web design, saya merekomendasikan untuk mengambil kursus di Kursus Web Design.

Konsep dari Responsive Menu Web Design

Selama ini kursusan yang paling baik menerapkan konsep belajar web design yaitu Kursus Web Design. Ketika belajar ke web desain responsif kita dihadapkan dengan berbagai teknik tentang cara terbaik untuk menangani mengubah menu navigasi kami untuk layar kecil. Sumber daya tampaknya tak ada habisnya. Itulah sebabnya aku akan menunjukkan empat konsep utama dan membahas keuntungan dan kerugian dari semua itu.

Tiga dari mereka yang dibuat dengan murni CSS dan satu menggunakan satu baris JavaScript.
Sebelum Kita Mulai

Dalam kode yang disajikan dalam artikel ini, saya tidak menggunakan vendor-prefiks untuk menjaga CSS lebih mudah untuk melihat dan memahami. Contoh-contoh CSS lebih kompleks menggunakan SCSS. Setiap contoh-host di CodePen di mana Anda dapat melihat CSS disusun jika Anda inginkan.

Semua konsep menu dalam artikel ini didasarkan pada struktur HTML sederhana yang saya sebut menu dasar. Peran atribut digunakan untuk menentukan konsep tertentu (full-horizontal, pilih, adat-dropdown dan off-kanvas).

Berikut Kode HTML nya :

<nav role="">
  <ul>
    <li><a href="#">Stream</a></li>
    <li><a href="#">Lab</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>​

Berikut Kode CSS ntuk media screen responsive, atur saja class pada tag ul atau li jika diperlukan : 

@media screen and (max-width: 44em) {

}