Tuesday 27 December 2016

Membuat Menu dropdown






Membuat Menu dropdown -Assalamualaikum gan. Udah lama gak ngepos ne, soalnya sibuk ama kegiatan kuliah sma susah dapat ide buat nulis hehehe.
postingan kali ini ane bakal ngebahas menu dropdown pada web. menu dropdown bisa di buat menggunakan CSS atau javascript.
post ini, ane bakal bahas pake CSS:
1. buat dulu file html nya:



2. lalu buat file cssnya:





(sesuaikan nama "class" dan "id" dlm tutor ini dngan "class" dan "id" file agan)
ane akan jelasin step by step biar agan ngerti cara kerja filenya
Penjelasan dari file di atas adalah:

a. untuk "wrapper" dan "header1" itu terserah agan mau ngaturnya kayak apa
b. "list-style:none" berfungsi menghilangkan simbol yang ada di samping list
c. "header1 ul li:hover>a"= jika kursor di atas tag "li" pada "ul" yang ada di "header1"
maka warna link akan "color:black;"
d.".menu-utama li" mengatur tinggi,panjang dan padding untuk isi list pada "menu-utama"
e. ".menu-utama li a" mengatur kondisi link sblm d klik
f."cursor:pointer" kursor akan berubah saat berada di atas link
g. ".submenu1" kondisi dropdown sebelum di hover
h. "submenu li" mengatur tampilan list-list pda dropdown
i. "#menu1:hover .submenu1" jika menu1 di hover maka ".submenu1"/ menu dropdown akan muncul

sekian tutorial dari ane kali ini, jika ada kesulitan silah hbungi lewat email (^-^)

Previous Post
Next Post

0 comments: