MEBUAT MENU MENGGUNAKAN CASCADING STYLE SHEETS (CSS)Pertemuan 3

DROP DOWN MENUDENGAN CSS

Drop down menu adalah teknik yang digunakan

untuk membuat sub menu pada main menu halaman

web.

Contoh Menu Drop Down:

Struktur dasar dari menu dropdown yang akan kita buat menggunakan stuktur HTML, ketik perintah berikut (simpan dengan nama mnuser.html ) :

Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini :

Buatlah file css dengan nama mnuser.css (simpan di satu folder dengan file mnuser.html), ketik perintah berikut :

Buka file mnuser.html, kemudian tambahkan perintah berikut :

Perintah yang ditambahkan

Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini :

Submenu

Untuk menyembunyikan ul li (submenu). Buka file mnuser.css, kemudian tambahkan perintah berikut :

Perintah yang ditambahkan

Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini :

Submenu produk (Elektronik dan

Furniture) disembunyikan

Untuk membuat menu menjadi horizontal dengan display block. Buka file mnuser.css, kemudian tambahkan perintah berikut :

Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini :

Untuk memunculkan submenu jika kursor diarahkan ke menu utama. Buka file mnuser.css, kemudian tambahkan perintah berikut :

Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini :

Submenu (Elektronik dan Furniture) akan muncul jika mouse diarahkan ke menu

Produk

Untuk memunculkan blok jika kursor diarahkan ke menu utama. Buka file mnuser.css, kemudian tambahkan perintah berikut :

Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini :

Jika mouse diarahkan ke menu Produk akan

muncul blok

Untuk style awal seblum cursor mouse di arahkan ke menu utama. Buka file muser.css, kemudian tambahkan perintah berikut :

Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini :

Jika mouse diarahkan ke menu produk, blok submenu yang tampil belum rata.

Blok belum rata

Untuk meratakan sub menu kanan kiri. Buka file mnuser.css, kemudian tambahkan perintah berikut :

Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini :

Blok sudah rata

LATIHAN.....Tambahkan menu LOGIN seperti contoh dibawah ini :

Catatan:Simpan semua latihan yang sudah Anda buat dan jangan sampai hilang. Karena masih ada kaitannya dengan pertemuan selanjutnya..!!!!