Salah satu aspek terpenting dalam pengembangan perangkat lunak dan situs web adalah pembuatan menu. Microsoft dan gagasannya yang paling terkenal, sistem operasi Windows, harus diambil sebagai contoh utama. Terlepas dari kenyataan bahwa produk ini digunakan oleh sebagian besar pengguna PC di dunia, kritik tidak hanya tidak berkurang, tetapi terus berkembang. Pada dasarnya, ini menyangkut ketidaknyamanan lokasi item menu. Berikut ini adalah penjelasan tentang cara membuat menu di CSS dan Expression Web.
instruksi
Langkah 1
Untuk mulai membuat menu horizontal, buka Kelola Gaya, lalu klik tombol Gaya Baru. Beri nama Selector gaya baru ul li. Penting! Pastikan file yang dihasilkan memiliki ekstensi drop-down.css. Untuk membuat menu horizontal, tunjukkan pada elemen yang dibuat bahwa itu akan benar-benar horizontal. Selanjutnya, tentukan lebar setiap item menu dan hapus semua titik yang tidak perlu yang ditempatkan di depan semua item dalam daftar.
Langkah 2
Masuk ke opsi Layout, atur atribut Display ke Inline untuk melakukan perataan horizontal. Selanjutnya, atur nilai Left ke atribut Float dan klik tombol Apply. Setel semua item daftar ke satu baris. Agar mereka ditempatkan dengan rapi dan tidak merangkak di atas satu sama lain, pada atribut Width, atur nilai Position menjadi 150 px. Periksa apakah semua elemen daftar memiliki ukuran yang sama. Selanjutnya, hapus titik-titik di depan semua elemen - untuk ini, buka atribut List dan atur parameter None di item tipe List Style. Klik OK untuk semua perubahan yang akan diterima dan diterapkan.
Langkah 3
Sesuaikan ukuran dan gaya font untuk ul li. Untuk melakukannya, buka Manage Styles dan klik kanan pada ul li, lalu pilih Modify Style. Kotak dialog yang sudah dikenal akan muncul. Pergi ke Font, pilih atribut Font-family dan atur ke Sans-serif, Arial, Helvetica. Selanjutnya, sesuaikan ukuran font dengan mengaturnya ke 0, 9. Setelah itu, atur atribut Text-transform menjadi Huruf Besar. Sesuaikan tinggi item menu di atribut Height - Position, atur nilainya menjadi 30 px.
Langkah 4
Setelah menyelesaikan semua tindakan korektif, simpan file sebagai menu.html. Selanjutnya, uji menu yang dibuat di browser yang berbeda untuk memastikannya berfungsi dengan benar. Seperti yang Anda lihat, desain menu horizontal cukup sederhana.
