Isi

• Langkah
• Nasihat
• Peringatan

Artikel wikiHow ini menjelaskan cara membuat menu tarik-turun di situs web Anda menggunakan kode HTML dan CSS. Menu drop-down akan muncul saat pengunjung mengarahkan kursor mouse ke tombol yang ditentukan; Selanjutnya, mereka dapat mengklik salah satu item untuk membuka situs web opsi tersebut.

Langkah

1. 

   Buka editor teks HTML. Anda dapat menggunakan editor teks sederhana (Notepad, TextEdit) atau yang lebih canggih (Notepad ++).
   • Jika Anda memutuskan untuk pergi ke Notepad ++, Anda harus memilih HTML dari bagian "H" pada menu Bahasa (Bahasa) di bagian atas jendela sebelum melanjutkan.

2. 

   
   
   Masukkan judul dokumen. Berikut adalah kode yang menentukan jenis kode yang akan digunakan untuk sisa dokumen:

3. 

   Buat menu drop-down. Masukkan kode berikut untuk menentukan ukuran dan warna menu drop-down, ingat untuk mengganti "#" dengan parameter yang ingin Anda gunakan (semakin besar angkanya, semakin besar menu drop-down). Kami juga dapat mengganti warna latar belakang "background-color" dan warna "color" dengan warna apa pun (atau kode warna HTML) yang Anda inginkan:

4. 

   
   
   Tentukan bahwa Anda ingin mengganti link di menu drop-down. Karena Anda kemudian akan menambahkan tautan ke menu, Anda dapat menggantinya di menu tarik-turun dengan memasukkan kode berikut:

5. 

   Menciptakan tampilan menu drop-down. Kode berikut menentukan ukuran dan warna menu drop-down, termasuk posisinya jika digabungkan dengan elemen lain di halaman web. Jangan lupa untuk mengganti "#" di bagian "min-width" dengan nomor yang Anda inginkan (misalnya 250) dan ubah tajuk "background-color" (warna latar) ke warna atau kode HTML tertentu:

6. 

   
   
   Tambahkan detail ke konten menu drop-down. Kode berikut akan menentukan warna teks di dalam dan ukuran tombol menu drop-down. Jangan lupa untuk mengganti "#" dengan jumlah piksel yang menentukan ukuran tombol menu:

7. 

   Mengedit bagaimana penunjuk mouse berubah saat diarahkan di menu drop-down. Saat Anda mengarahkan kursor mouse ke tombol menu, beberapa warna perlu diubah. Garis "background-color" akan mencerminkan warna yang berubah saat Anda memilih sesuatu di menu drop-down, sedangkan "background-color" kedua adalah warna yang akan diubah tombol menu. Idealnya, kedua warna ini harus lebih terang daripada saat tidak dipilih:

8. 

   Tutup bagian CSS. Masukkan kode berikut untuk menentukan bahwa Anda telah selesai dengan bagian CSS dari dokumen:

9. 

   Buat nama untuk tombol menu. Masukkan kode berikut tapi ingat untuk mengganti "Nama" dengan nama tombol menu drop-down (contoh: Tidak bisa):

10. 

    Tambahkan tautan ke menu. Setiap item di menu drop-down akan ditautkan ke sesuatu, baik itu halaman di situs web saat ini atau situs web eksternal. Tambahkan pilihan Anda ke menu drop-down dengan memasukkan kode berikut, yang perlu Anda ganti https://www.website.com dengan alamat tautan (simpan tanda kurung) dan ganti "Nama" dengan nama tautan.

11. 

    Tutup dokumen. Masukkan tag berikut untuk menutup dokumen dan menentukan akhir kode dari menu drop-down:

12. 

    Kode review menentukan menu drop-down. Cuplikannya akan terlihat seperti ini: Iklan

Nasihat

• Selalu tinjau kode sebelum memposting di situs web.
• Petunjuk di atas adalah untuk menu drop-down yang akan berfungsi saat Anda mengarahkan kursor mouse ke tombol menu. Jika Anda ingin membuat menu drop-down yang hanya diklik saat Anda mengklik, Anda memerlukan JavaScript.

Peringatan

• Pewarnaan HTML sangat terbatas ketika kami menggunakan tag seperti "hitam" atau "hijau". Anda dapat memeriksa generator kode warna HTML yang memungkinkan pengguna membuat dan menggunakan warna khusus di sini.