Cara Membuat Menu Dropdown dengan HTML – Dropdown adalah sebuah menu pilihan yang ditampilkan dalam bentuk dropdown. Pilihan-pilihan yang tersedia dalam menu ini dapat diakses melalui tombol atau link yang diklik.
Biasanya, menu ini digunakan untuk navigasi website atau untuk membuat form yang lebih interaktif.
Untuk membuat HTML Drop Down Menu, kita dapat menggunakan tag HTML <select> dan <option>.
Tag <select> digunakan sebagai container dari menu dropdown, sedangkan tag <option> digunakan untuk menambahkan pilihan-pilihan dalam menu.
Contoh Menu Dropdown dengan HTML
<select>
<option value=”option1″>Option 1</option>
<option value=”option2″>Option 2</option>
<option value=”option3″>Option 3</option>
</select>
Di atas adalah contoh sederhana dari Menu Dropdown dengan HTML yang memiliki 3 pilihan.
Anda juga dapat menambahkan atribut “selected” pada tag <option> untuk menentukan pilihan awal yang akan ditampilkan saat menu dibuka.
Selain itu, Anda juga dapat menambahkan gaya pada menu dropdown dengan menggunakan CSS.
Contohnya, Anda dapat mengubah warna font, ukuran font, warna background, dll.
Secara umum, HTML Drop Down Menu merupakan fitur yang sangat berguna untuk website yang ingin memberikan navigasi yang lebih interaktif dan mudah digunakan.
Namun, sebaiknya digunakan dengan bijak karena dapat membuat website menjadi kurang aksesibel bagi pengguna yang menggunakan perangkat keras atau perangkat lunak khusus.
Contoh Dropdown
Berikut ini adalah contoh HTML yang membuat menu drop down:<html>
<body>
<form>
<label for=”menu”>Pilih Makanan Favorit:</label>
<select id=”menu” name=”makanan”>
<option value=”ayam-goreng”>Ayam Goreng</option>
<option value=”nasi-goreng”>Nasi Goreng</option>
<option value=”sate”>Sate</option>
<option value=”bakso”>Bakso</option>
<option value=”gado-gado”>Gado-gado</option>
</select>
</form>
</body>
</html>
Pada contoh di atas, kita menggunakan tag <form> sebagai container dari menu dropdown.
Baca : Membuat HTML form tag serta Element nya
Kemudian kita menambahkan tag <label> untuk memberikan deskripsi pada menu dropdown, dan tag <select> untuk membuat menu dropdown itu sendiri.
Di dalam tag <select> kita menambahkan beberapa tag <option> untuk menambahkan pilihan-pilihan yang tersedia dalam menu.
Setiap tag <option> memiliki atribut “value” yang digunakan untuk memberikan nilai yang akan dikirimkan jika pilihan tersebut dipilih.
Anda juga dapat menambahkan atribut “selected” pada salah satu tag <option> untuk menentukan pilihan awal yang akan ditampilkan saat menu dibuka.
Contohnya, jika Anda ingin pilihan “Nasi Goreng” sebagai pilihan awal yang ditampilkan, maka Anda dapat menambahkan atribut “selected” pada tag <option> untuk “Nasi Goreng” seperti ini:
<option value=”nasi-goreng” selected>Nasi Goreng</option>
Anda juga dapat menambahkan gaya pada menu dropdown dengan menggunakan CSS. Contohnya, Anda dapat mengubah warna font, ukuran font, warna background, dll.
Demikian contoh html yang membuat menu drop down. Semoga dapat membantu.