Menu digunakan untuk memudahkan navigasi pengguna melalui bagian-bagian di situs. Untuk menarik perhatian pengunjung, menu harus fungsional, mudah digunakan dan pada saat yang sama dikombinasikan dengan desain seluruh sumber daya.
instruksi
Langkah 1
Sebelum membuat menu, tentukan jenisnya. Anda dapat membuat kotak drop-down horizontal atau vertikal yang akan ditampilkan kepada pengguna saat pengguna mengarahkan kursor mouse ke atasnya. Saat memilih menu tertentu, Anda dapat dipandu oleh seberapa nyaman pengunjung untuk menggunakannya dan bagaimana itu akan dikombinasikan dengan desain.
Langkah 2
Setelah memilih jenis menu, buka file halaman Anda menggunakan editor teks apa pun yang Anda gunakan untuk mengedit HTML. Arahkan ke bagian kode yang diinginkan di mana Anda ingin memasukkan elemen antarmuka Anda.
Langkah 3
Setelah itu, buat daftar opsi dengan membuat blok dan membuat daftar bernomor dengan id yang ditetapkan untuk itu. Sebagai contoh:
- Tautan 1
- Tautan 2
- Tautan 3
Dalam contoh ini, saya membuat daftar berpoin tiga elemen dan menempatkannya di lapisan div dengan ID panel ID.
Langkah 4
Buka blok bagian halaman Anda dan buat menu cascading style sheet yang sesuai. Jika Anda ingin membuat menu horizontal, Anda dapat menyertakan atribut sebaris untuk daftar yang dihasilkan:
#panel ul li {tampilan: sebaris; }
Langkah 5
Untuk membuat garis horizontal di sepanjang halaman, Anda dapat menggunakan kode berikut:
#panel ul {margin-kiri: 0; bantalan: 2 piksel 0; }
Langkah 6
Kemudian Anda dapat melakukan pembagian visual menjadi persegi panjang:
#panel ul li a {margin-kiri: 3px; batas: 1 piksel; bantalan: 2px 3px; latar belakang: biru; }
Kode ini mengatur indentasi teks dari elemen batas melalui atribut margin-left dan padding, dan juga mengatur warna latar belakang untuk setiap item daftar. Dalam contoh ini, warnanya biru, tetapi Anda dapat mengubahnya sesuai kebijaksanaan Anda sendiri.
Langkah 7
Untuk menunjuk ke item pada halaman saat ini yang dipilih di tab, atur parameter yang sesuai ke kelas terbuka:
#menu ul li a # buka {latar belakang: merah; batas-bawah: 1px; }
Halaman saat ini yang dipilih di panel sekarang akan ditampilkan dengan warna merah.
Langkah 8
Simpan perubahan ke file dan periksa fungsionalitas kode tertulis dengan membuka halaman Anda melalui browser. Untuk menyetel opsi tampilan tambahan, Anda selalu dapat menambahkan CSS atau HTML untuk menyempurnakan tampilan objek.
