Cara Membuat Menu Dropdown di HTML dan CSS

Artikel How.com.vn ini akan mengajarkan kepada Anda cara membuat menu drop-down untuk situs web menggunakan kode HTML dan CSS. Menu drop-down ditampilkan ketika seseorang mengarahkan kursor pada tombolnya. Setelah menu ditampilkan, pengguna dapat mengeklik salah satu opsi menu untuk mengunjungi halaman web opsi terpilih.

Langkah

Unduh PDF

1
Buka program penyunting teks HTML. Anda bisa menggunakan program penyunting teks sederhana seperti Notepad atau TextEdit, atau memanfaatkan penyunting teks yang lebih mutakhir, seperti Notepad++.
- Jika Anda ingin menggunakan Notepad++, pastikan Anda memilih opsi “HTML” dari segmen "H" di menu “Language” yang ada di atas jendela sebelum melanjutkan.
2
Masukkan judul atau kepala dokumen. Segmen ini menentukan jenis kode yang digunakan untuk seluruh dokumen:
```
<!DOCTYPE html><html><head><style>
```
3
Buatlah menu drop-down. Tikkan kode berikut ini untuk menentukan ukuran dan warna menu. Pastikan Anda mengganti simbol "#" dengan angka yang ingin digunakan (semakin besar angka tersebut, semakin besar ukuran menu). Anda juga bisa mengganti nilai "background-color" dan "color" dengan warna apa pun (atau kode warna HTML) yang diinginkan:^{[1]XTeliti sumber}
```
.dropbtn {    background-color: black;    color: white;    padding: #px;    font-size: #px;    border: none;}
```
4
Masukkan perintah penempatan tautan pada menu drop-down. Karena Anda nanti akan menambahkan tautan pada menu drop-down, Anda bisa menempatkan tautan tersebut di dalam menu dengan memasukkan kode berikut:
```
.dropdown {    position: relative;    display: inline-block;}
```
5
Buatlah tampilan menu drop-down. Kode berikut akan menentukan ukuran, posisi (ketika elemen lain pada halaman web terhubung/terlibat), dan warna menu. Pastikan Anda mengganti simbol “#” pada segmen "min-width" dengan angka yang diinginkan (mis. 250) dan mengubah entri pada judul "background-color" menjadi warna atau kode warna HTML yang disukai:
```
.dropdown-content {    display: none;    position: absolute;    background-color: lightgrey;    min-width: #px;    z-index: 1;}
```
6
Tambahkan detail pada konten menu. Kode berikut berhubungan dengan warna teks menu dan ukuran tombol menu drop-down. Pastikan Anda mengganti simbol "#" dengan besar piksel yang diinginkan untuk menentukan ukuran tombol:
```
.dropdown-content a {    color: black;    padding: #px #px;    text-decoration: none;    display: block;}
```
7
Sunting “sifat” menu drop-down ketika kursor diarahkan. Ketika Anda mengarahkan kursor pada tombol menu, Anda membutuhkan beberapa perubahan warna. Baris "background-color" pertama mengacu kepada perubahan warna yang terjadi ketika Anda memilih entri pada menu, sementara baris "background-color" kedua mengacu kepada perubahan warna tombol menu drop-down. Idealnya, kedua warna harus lebih terang daripada warna tombol saat tidak dipilih:
```
.dropdown-content a:hover {background-color: white;}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: grey;}
```
8
Tutup segmen CSS. Masukkan kode berikut untuk menandakan bahwa Anda sudah selesai mengerjakan segmen CSS pada dokumen:
```
</style></head>
```
9
Buatlah nama tombol drop-down. Masukkan kode berikut dan pastikan Anda mengganti entri "Nama" dengan apa pun yang ingin digunakan sebagai nama tombol (mis. “Menu”):
```
<div class="dropdown"><button class="dropbtn">Nama</button><div class="dropdown-content">
```
10
Tambahkan tautan menu. Setiap entri pada menu drop-down harus terhubung dengan halaman/objek, baik halaman web internal atau situs web luar. Anda bisa menambahkan opsi menu drop-down dengan memasukkan kode berikut. Pastikan Anda mengganti https://www.situsweb.com dengan alamat tautan (jangan hapus tanda kutip pada kode) dan entri "Nama" dengan nama tautan.
```
<a href="https://www.website.com">Nama</a><a href="https://www.website.com">Nama</a><a href="https://www.website.com">Nama</a>
```
11
Tutup dokumen. Masukkan penanda berikut untuk menutup dokumen dan menandai akhir kode menu drop-down:
```
</div></div></body></html>
```

Sebagai contoh, urutan kode yang Anda masukan akan tampak seperti berikut:^{[2]XTeliti sumber}

<!DOCTYPE html><html><head><style>.dropbtn {    background-color: black;    color: white;    padding: 16px;    font-size: 16px;    border: none;}.dropdown {    position: relative;    display: inline-block;}.dropdown-content {    display: none;    position: absolute;    background-color: lightgrey;    min-width: 200px;    z-index: 1;}.dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block;}.dropdown-content a:hover {background-color: white;}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: grey;}</style></head><div class="dropdown"><button class="dropbtn">Media Sosial</button><div class="dropdown-content"><a href="https://www.google.com">Google</a><a href="https://www.facebook.com">Facebook</a><a href="https://www.youtube.com">YouTube</a></div></div></body></html>

Tips

Selalu uji kode sebelum mengunggahnya di situs web.
Petunjuk di atas merupakan arahan untuk membuat menu drop-down yang berfungsi ketika Anda mengarahkan kursor pada tombol menu. Jika Anda ingin membuat menu drop-down yang hanya tampil ketika diklik, Anda perlu menggunakan JavaScript.^{[3]XTeliti sumber}

Peringatan

Warna-warna HTML relatif terbatas ketika Anda menggunakan penanda warna seperti "black" atau "green". Anda bisa menemukan generator kode warna HTML yang memungkinkan Anda untuk membuat dan menggunakan warna kustomisasi di sini.