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:

Menu Navigasi Sebelum Diperbaiki
Efek hover pada menu induk menghilang saat pointer memasuki submenu

Sebelum

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>:

List Item
Susunan Submenu

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:

Menu Navigasi Sesudah Diperbaiki
Warna hover pada menu induk tetap terjaga

Sesudah


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

    
    ::-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 ??

    • 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 ...

Komentar telah ditutup.