Menu ini digunakan untuk memudahkan navigasi pengguna melalui bahagian-bahagian di laman web ini. Untuk menarik perhatian pengunjung, menu harus berfungsi, mudah digunakan dan pada masa yang sama digabungkan dengan reka bentuk keseluruhan sumber.
Arahan
Langkah 1
Sebelum membuat menu, tentukan jenisnya. Anda boleh membuat kotak lungsur mendatar atau menegak yang akan ditunjukkan kepada pengguna apabila pengguna melabuhkannya dengan kursor tetikus. Semasa memilih menu tertentu, anda boleh dipandu oleh betapa senangnya pengunjung menggunakannya dan bagaimana ia digabungkan dengan reka bentuk.
Langkah 2
Setelah memilih jenis menu, buka fail halaman anda menggunakan penyunting teks apa pun yang anda gunakan untuk mengedit HTML. Navigasi ke bahagian kod yang dikehendaki di mana anda ingin memasukkan elemen antara muka anda.
Langkah 3
Selepas itu, buat senarai pilihan dengan membuat blok dan buat senarai bernombor dengan id diberikan kepadanya. Sebagai contoh:
- Pautan 1
- Pautan 2
- Pautan 3
Dalam contoh ini, saya membuat senarai butir tiga elemen dan meletakkannya di lapisan div dengan ID panel ID.
Langkah 4
Pergi ke blok bahagian halaman anda dan buat menu lembaran gaya lata yang sesuai. Sekiranya anda ingin membuat menu mendatar, anda boleh memasukkan atribut sebaris untuk senarai yang dihasilkan:
#panel ul li {paparan: sebaris; }
Langkah 5
Untuk membuat garis mendatar sepanjang keseluruhan halaman, anda boleh menggunakan kod berikut:
#panel ul {margin-kiri: 0; pembalut: 2px 0; }
Langkah 6
Kemudian anda boleh melakukan pembahagian visual menjadi segi empat tepat:
#panel ul li a {margin-left: 3px; sempadan: 1px; padding: 2px 3px; latar belakang: biru; }
Kod ini menetapkan lekukan teks dari elemen sempadan melalui atribut margin-kiri dan padding, dan juga menetapkan warna latar untuk setiap item senarai. Dalam contoh ini, warnanya berwarna biru, tetapi anda boleh mengubahnya mengikut budi bicara anda sendiri.
Langkah 7
Untuk menunjuk ke item pada halaman saat ini yang dipilih dalam tab, tetapkan parameter yang sesuai ke kelas terbuka:
#menu ul li a # terbuka {latar belakang: merah; sempadan-bawah: 1px; }
Halaman semasa yang dipilih di panel sekarang akan dipaparkan dengan warna merah.
Langkah 8
Simpan perubahan pada fail dan periksa fungsi kod tertulis dengan membuka halaman anda melalui penyemak imbas. Untuk menetapkan pilihan paparan tambahan, anda selalu dapat menambahkan CSS atau HTML untuk meningkatkan penampilan objek.
