Pembuatan menu mungkin merupakan salah satu poin utama dalam pengembangan situs dan program. Selain itu, elaborasi yang baik dan desain logis dari menu seperti itu adalah wajah situs atau program apa pun. Sebagai contoh, mari kita ambil Microsoft dan sistem operasi Windows 7. Setelah rilis Windows 7, Microsoft mendengar banyak kritik yang tidak menyanjung dirinya sendiri. Ada banyak kritik, tetapi paling sering item menu diposisikan secara tidak nyaman. Baca dengan seksama tutorial ini tentang cara membuat menu dropdown horizontal dengan CSS dan Expression Web. Gaya tag akan berubah untuk membuat menu
instruksi
Langkah 1
Pergi ke Manage Styles dan kemudian klik tombol New Style. Beri nama Selector ul li ke gaya baru yang baru saja Anda buat. Juga ingat untuk memastikan gaya baru harus didefinisikan dalam file drop-down.css.
Langkah 2
Untuk meregangkan menu horizontal, Anda perlu memberi tahu item menu bahwa itu akan horizontal. Selanjutnya, Anda perlu menentukan lebar setiap item menu dan menghapus semua titik yang tidak perlu di depan semua item daftar.
Langkah 3
Untuk perataan horizontal, buka Tata Letak dan atur atribut tampilan ke sebaris. Atur atribut float ke kiri. Klik tombol Terapkan. Semua item daftar harus disetel dalam satu baris. Agar mereka tidak saling tumpang tindih, Anda perlu melakukan hal berikut: atur nilai Posisi atribut lebar ke 150px. Sekarang periksa. Semua elemen daftar harus berukuran sama.
Langkah 4
Sekarang kita perlu mencoba untuk menghilangkan titik-titik di depan daftar item. Untuk melakukan ini, buka Daftar dan atur atribut list-style –type ke none.
Langkah 5
Klik OK untuk menerima semua perubahan.
Langkah 6
Untuk menyesuaikan ukuran font untuk gaya ul li, Anda perlu melakukan hal berikut. Di Manage Styles, klik kanan pada gaya ul li yang Anda butuhkan untuk memilih Modify Style. Kotak dialog yang sudah dikenal untuk menambahkan atau mengubah atribut akan terbuka. Buka kategori Font dan atur atribut font-family ke Arial, Helvetica, sans-serif. Selanjutnya, buka atribut font-size dan atur ke 0.9em. Setelah itu, atur atribut text-transform, atur nilainya menjadi huruf besar.
Langkah 7
Ketinggian item dalam menu yang dibuat dapat disesuaikan dalam kategori Posisi. Atur atribut height menjadi 30px.
Langkah 8
Selanjutnya, Anda perlu menyimpan file menu.html. Untuk melakukan ini, Expression Web akan membuka jendela Simpan File Tertanam yang diperlukan untuk menyimpan file. Simpan di file drop-down.css. Klik OK untuk menyimpan.
Langkah 9
Sekarang periksa hasil Anda. Untuk keandalan, lebih baik mengujinya di browser yang berbeda. Untuk memeriksa hasil yang diperoleh di browser default, Anda harus menekan tombol F12 pada keyboard Anda.
