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 Komentar
Unknown
Pertamaxxx !
:D
saya masih ngga ngerti cara kerja '>' dan '~'
mohon penjelasannya mas :)
Unknown
hmhm saya sudah tahu maksudnya ini
^^
Taufik Nurrohman
@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
Putra
@Taufik Nurrohman hu uh mas, saya juga. sering mbaca css nya mas ada tulisan ittu, tak pikir2 belom ketemu maksud kode ittuuu :D
Yusril Ibnu Maulana
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
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 :
nah problemnya code diatas (:hover) gk work... :( kenapa yah ??
Taufik Nurrohman
Sama mas. Sudah Saya coba tidak bisa.
Yusril Ibnu Maulana
kenapa yah ??
budkalon
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.Surga Kenari
sudah saya pasang mas Taufik di navbar, menjaga keadaan hover pada menu induk :D
Febri Tri Harmoko
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 ...
Taufik Nurrohman
Yang di JSFiddle itu juga sudah simpel.