Cara Membuat Menu Geser

Daftar Isi:

Cara Membuat Menu Geser
Cara Membuat Menu Geser

Video: Cara Membuat Menu Geser

Video: Cara Membuat Menu Geser
Video: Sketchware Tutorial Indonesia | Membuat menu samping / Slide menu di Sketchware 2024, November
Anonim

Salah satu aspek terpenting dari pengembangan situs web dan perangkat lunak adalah pembuatan menu. Menu geser yang indah tetap menjadi patokan bagi banyak pemilik situs web dan pemrogram. Ini dapat dilakukan dengan menggunakan CSS dan alat Web Ekspresi.

Cara membuat menu geser
Cara membuat menu geser

instruksi

Langkah 1

Buka Expression Web dan pergi ke Manage Style untuk mulai membuat menu geser dan tekan tombol New Style. Beri nama Selector gaya baru ul li. Pastikan file yang dihasilkan memiliki ekstensi drop-down.css. Untuk membuat menu geser, tentukan posisi yang sesuai di layar. Tentukan lebar masing-masing item menu dan hapus titik-titik yang tidak perlu yang mungkin ada di depannya.

Langkah 2

Jalankan opsi Layout dan atur atribut Display. Berikan nilai Inline yang sesuai untuk disejajarkan di layar. Atur atribut Float ke Left dan tekan tombol Apply. Atur semua elemen daftar menjadi satu baris. Untuk menjaganya dalam urutan yang rapi dan tidak tumpang tindih, atur atribut Width ke Position dalam bentuk 150 px. Pastikan semua item dalam daftar memiliki ukuran yang sama. Hapus titik-titik di depan setiap elemen dengan masuk ke atribut Daftar dan atur tipe Gaya Daftar ke Tidak Ada. Klik "OK" untuk menerima perubahan dan menerapkannya.

Langkah 3

Sesuaikan gaya dan ukuran font untuk ul li. Pergi ke Manage Styles dan klik kanan pada ul li, pilih Modify Style. Anda akan melihat menu dialog yang sudah dikenal. Pergi ke Font, pilih Font-family dan atur atribut ini ke Helvetica, Arial, Sans-serif. Sesuaikan ukuran font dan atur ke 0, 9. Atur atribut Text-transform ke Huruf Besar. Di atribut Tinggi - Posisi, tentukan tinggi yang tepat dari item menu dengan menyetel nilainya ke 30 px.

Langkah 4

Simpan file sebagai menu.html ketika semua tindakan korektif telah selesai. Uji menu yang baru saja Anda buat di berbagai aplikasi dan browser untuk melihat apakah itu berfungsi. Seperti yang Anda lihat, tidak sulit untuk membuat menu seperti itu.

Direkomendasikan: