Cara membuat submenu di html

Dalam Vvideo ini Anda akan belajar cara membuat Bilah Menu Dropdown Minimal dengan Submenu di HTML & CSS saja. Sebelumnya saya sudah membagikan Minimal Navigation Menu Bar menggunakan CSS namun tidak ada fitur submenu atau drop menu. Jadi sekarang saatnya membuat Menu Dropdown.

Table of Contents Show

www.youtube.com
Peringatan
Tentang wikiHow ini
Apakah artikel ini membantu Anda?

verizon email setel ulang kata sandi

Menu tarik-turun (terkadang disebut menu tarik-turun atau daftar) adalah elemen kontrol grafis yang dirancang untuk membantu pengunjung menemukan halaman, konten, atau fitur tertentu di situs web Anda. Mengklik atau mengarahkan kursor ke judul menu tingkat atas menunjukkan daftar opsi ke menu tarik-turun.

Pada awalnya, di halaman web, hanya ada bilah menu atau bilah navbar kecil, tetapi ketika Anda mengklik bilah menu itu, daftar menu meluncur ke bawah dan terlihat. Submenu atau menu drop tersebut disembunyikan pada awalnya dan ketika Anda mengklik item menu induknya maka daftar drop ditampilkan. Saya juga menambahkan warna hover sederhana pada daftar seperti yang Anda lihat pada gambar.

#html #css

www.youtube.com

Unduh PDF

Artikel wikiHow 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

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]
```
.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:
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>
```

Tinjau kode kotak drop-down yang sudah dibuat. Sebagai contoh, urutan kode yang Anda masukan akan tampak seperti berikut:[2]

<!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>

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]

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.