» »Unlabelled » membuat dropdown sederhana

06.33
0
Pertama-tama kita buat dulu dokumen HTML savenya bebas yang penting (dot)HTML. ketikan script dibawah ini

ini hasilnya dari script HTML tadi

setelah itu kita buat file dengan style.css usahakan file css ini dengan html yang diatas di 1 folderin
.



dan ini hasilnya dari css diatas :

untuk membuat efek dropdown menu, tag <ul> yang berada dalam <li> harus kita sembunyikan dulu . gunakan property display: none

dan ini hasilnya dari css diatas :

berikutnya atur penampilan menu utama

dan ini hasil dari css diatas :

agar lebih menarik, buat css rule untuk kondisi menu hover.

dan ini hasil dari css diatas :

kemudian kita buat kondisi hover untuk menampilkan tag <ul> yang berada dalam <li> aliasa mengatur tampilan submenu
.

dan ini hasil dari css diatas :




hampir sama dengan langkah di atas, namun kali ini tag yang di atur adalah <li>


dan ini hasil dari css diatas:

selanjutnya atu agar setiap tag <a> yang berada dalam <li>, berubah warna backgroundnya saat kondisi hover

dan ini hasil terakhir dari contoh diatas :
Diposting oleh di 06.33

0 komentar:

Posting Komentar

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Langganan: Posting Komentar (Atom)