Web Design : Agar menu bootstrap muncul ketika dihover ( bukan diklik ) maka kamu perlu lakukan cara ini..



Linkdesain. Di artikel ini kita akan ngebahas issue yang sering dialami para web designer pengguna bootstrap. Para web designer atau frontend developer pasti sudah tidak asing dengan nav pada bootstrap, biasanya secara standar dan default submenu pada nav bootstrap ini akan muncul ketika kita klik pada menu, ternyata cara menampilan menu seperti ini tidak terlalu disukai oleh kebanyakan user atau pengunjung website, dan ada banyak pertanyaan bagaimana mengubah behavior dari menu tersebut agar kita cukup menghover saja menu pada navigasi dan submenu akan muncul dengan sendirinya dan kondisi ini hanya berlaku di tampilan desktop sedangkan di mobile tetap mengklik pada menu untuk menampilkan submenu. Jika kita googling banyak sekali trik untuk mengatasi masalah ini, tapi kali ini kita akan ngebahasnya dengan trik css versi linkdesain.

Kalau kalian sering berkutat dengan framework Bootstrap pasti sudah tau kalau toggle menu atau menu pada tampilan mobile bootstrap ini akan muncul di resolusi dibawah 768 px , karena hover menu ini tidak akan kita buat di tampilan mobile, maka kita akan membatasi properti css nya diatas resolusi 767 px saja atau min 768px .
 

Untuk membuat hover menu bootstrap pada tampilan desktop ternyata sangat mudah,  setelah saya bereksperimen ternyata jadilah kode cssnya seperti ini, cukup kopi dan paste kode berikut di file css mu dan menu navigasinya akan muncul dengan cara di hover.

/*hover menu bootstrap*/ 
@media only screen and (min-width: 768px) { 
.dropdown:hover > .dropdown-menu { display: block;}
.dropdown > .dropdown-menu.sub-menu >  .dropdown:hover > .dropdown-menu.sub-menu { margin-left: 100%;top: -2px;  } 
.dropdown .dropdown-menu.sub-menu .dropdown-menu.sub-menu .dropdown-menu.sub-menu {  top: -8px;  } 
.dropdown:hover > .dropdown-menu > .dropdown-menu { display: block; }
.dropdown:hover > .dropdown-menu > .dropdown-menu > .dropdown-menu { display: block;}
.navbar ul li ul.dropdown-menu {background: #e9a825}
.navbar ul li ul.dropdown-menu li {margin: 0px 0px 0px 0px}
.navbar ul li ul.dropdown-menu li a{padding: 5px 20px;}
.navbar .dropdown-menu > li > a:focus, 
.navbar .dropdown-menu > li > a:hover {background-color: #d79717;}
}

untuk warna background bisa disesuaikan sendiri.. ~hdr

Share this

Related Posts

Previous
Next Post »

Komentar disini ..