Menjaga Keadaan Hover pada Menu Induk
Masalah yang tampak kecil tapi kita harap bisa diperbaiki adalah mengenai efek hover menu induk pada navigasi bertingkat yang akan menghilang setelah pointer memasuki submenu:
Itu terjadi karena pada umumnya kita menargetkan efek hover pada elemen tautan saja seperti ini:
nav li a:hover {
background-color:blue;
}
Padahal yang seharusnya kita targetkan adalah elemen list/daftar yang menjadi induk dari submenu, karena submenu berada di dalam elemen <li>
, bukan di dalam elemen <a>
:
Sayangnya menargetkan elemen <li>
secara sepihak untuk mempertahankan warna menu induk tidak bisa kita lakukan karena efek hover berada pada elemen <a>
, sehingga saat pointer keluar dari <a>
maka efek hover akan menghilang. Tapi berbeda jika kita menargetkan elemen <li>
kemudian memanfaatkan sikap hover pada elemen tersebut untuk mengeset warna direct children tautan di dalamnya:
nav li a:hover,
nav li:hover > a {
background-color:blue;
}
Dengan cara di atas maka warna pada menu induk akan tetap terjaga meskipun pointer sudah meninggalkannya. Karena meskipun sudah keluar, tapi pada dasarnya pointer masih berada di dalam elemen <li>
induk:
Artikel Terkait: Mari Berbicara Soal Menu Navigasi
11 Comments:
Pertamaxxx !
:D
saya masih ngga ngerti cara kerja '>' dan '~'
mohon penjelasannya mas :)
hmhm saya sudah tahu maksudnya ini
^^
@Syndicate OS Kalau ada waktu Saya buatkan dalam bentuk posting referensi. Saya pernah dapat artikel yang bagus dari CSS-Tricks soal selektor-selektor ini :-bd
@Taufik Nurrohman hu uh mas, saya juga. sering mbaca css nya mas ada tulisan ittu, tak pikir2 belom ketemu maksud kode ittuuu :D
saya mau tanya lagi yg berkaitan dengan ini hehehehe, lihdat di blog saya http://yuzsite.blogspot.com/ , saya ingin mengkostumisasu scrollbar walau hanya support Chrome saja, gini
::-webkit-scrollbar{ /* Ini kan background Scrollbar nya */
height:12px;
width:12px;
background:#000
}
::-webkit-scrollbar-thumb{ /* Kalau Ini Scrollbar */
background-color:#d6e6f0;
-moz-border-radius:10px;
border:1px solid #000;
border-radius:10px
}
::-webkit-scrollbar-thumb:hover{ /* Kalau ini saat di hover */
background-color:white;
}
::-webkit-scrollbar-thumb:active{ /* Kalau ini saat di klik */
background-color:gray
}
nah saya ingin gaya scrollbarnya seperti di (start menu windows 8) jadi saat di hover ::-webkit-scrollbar itu jadi agak besar dan kalau tidak di hover jadi mengecil, saya sudah coba seperti ini :
::-webkit-scrollbar{ /* Ini kan background Scrollbar nya */
height:12px;
width:8px;
background:#000
}
::-webkit-scrollbar:hover { /* Ini kan background Scrollbar nya saat di hover */
height:12px;
width:12px;
background:#000
}
::-webkit-scrollbar-thumb{ /* Kalau Ini Scrollbar */
background-color:#d6e6f0;
-moz-border-radius:10px;
border:1px solid #000;
border-radius:10px
}
::-webkit-scrollbar-thumb:hover{ /* Kalau ini saat di hover */
background-color:white;
}
::-webkit-scrollbar-thumb:active{ /* Kalau ini saat di klik */
background-color:gray
}
nah problemnya code diatas (:hover) gk work... :( kenapa yah ??
Sama mas. Sudah Saya coba tidak bisa.
kenapa yah ??
sudah saya pasang mas Taufik di navbar, menjaga keadaan hover pada menu induk :D
Biasanya saya memakai kode ganda, yaitu :hover dan juga :active
Seperti ini:
::-webkit-scrollbar{ /* Yang ini background Scrollbar */
width:12px;
background:#000;
}
::-webkit-scrollbar:hover,::-webkit-scrollbar:active { /* Yang ini background Scrollbar saat keadaan hover dan aktif */
width:18px;
background:#fff
}
::-webkit-scrollbar-thumb{ /* Ini pegangan Scrollbar */
background-color:#d6e6f0;
-moz-border-radius:10px;
-o-border-radius:10px
border-radius:10px
border:1px solid #000;
}
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{ /* dan lagi, hover dan aktif */
background-color:white;
}
Tetapi hanya akan berhasil jika digunakan pada elemen di dalam <article> dan sejenisnya, sedangkan jika pada scrollbar halaman tidak dapat berfungsi.
kak jika ingin menu navigasi nya responsive itu gmn yah ?
contoh seperti ini : http://jsfiddle.net/sodiyc/AFZNY/
saya mencari menu multi dropdown yg simple susah ketemu dan akhir ny ketemu di situs ny kakak :)
cuma saya pengen ny sih jadiin responsive tpi gak ngerti :( bisa kasih clue atau panduannya kak ? makasih sebelm ny jika mau nanggapin pesan ini :) Hehehe ...
Yang di JSFiddle itu juga sudah simpel.
Post a Comment
<< Home