Unduh PDF
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
Unduh PDF
-
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.
-
Masukkan judul atau kepala dokumen. Segmen ini menentukan jenis kode yang digunakan untuk seluruh dokumen:
<!DOCTYPE html> < html > < head > < style >
-
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] X Teliti sumber
. dropbtn { background-color : black ; color : white ; padding : #px ; font-size : #px ; border : none ; }
-
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 ; }
-
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 ; }
-
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 ; }
-
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 ;}
-
Tutup segmen CSS. Masukkan kode berikut untuk menandakan bahwa Anda sudah selesai mengerjakan segmen CSS pada dokumen:
</ style > </ head >
-
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" >
-
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 >
-
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] X Teliti sumber
<!DOCTYPE html> < html > < head > < style > . dropbtn { background-color : black ; color : white ; padding : 16 px ; font-size : 16 px ; border : none ; } . dropdown { position : relative ; display : inline-block ; } . dropdown-content { display : none ; position : absolute ; background-color : lightgrey ; min-width : 200 px ; z-index : 1 ; } . dropdown-content a { color : black ; padding : 12 px 16 px ; 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 >
Iklan
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] X Teliti sumber
Iklan
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 .
Iklan
Referensi
Iklan
