Responsive Horizontal Menu Onclick Sub Menu Jquery - Kebanyakan horizontal menu menggunakan efek hover untuk menampilkan sub menunya baik yang menggunakan CSS maupun Jquery. Kebetulan kemarin ada sahabat Kompi yang menanyakan tentang cara membuat horizontal menu namun menggunakan onclick untuk menampilkan sub menunya. Artinya sub menunya akan muncul dengan cara klik pada menu induknya, begitu pun untuk menyembunyikannya.
Kali ini saya akan mencoba membuat responsive horizontal menu pure CSS yang pernah saya sharing dengan efek hover untuk menampilkan sub menunya menjadi responsive horizontal menu dengan onclick untuk menampilkan sub menunya dengan Jquery. Dengan ini sekalian mencoba memperbaiki responsive horizontal menu pure CSS ini yang sebelumnya tidak bisa berfungsi ketika diakses menggunakan mobile. Apakah responsive horizontal menu ini menjadi berfungi pada mobile dengan onclick sub menu dengan Jquery? Saya tunggu respon dari sahabat yang menggunakan mobile untuk mencoba menu ini.
Penampakan responsive horizontal menu onclick sub menu dengan jquery ini tampak pada gambar gif di bawah ini.
atau
Silahkan coba zoom in / zoom out layar monitor Anda.
Bagi yang ingin mencoba responsive horizontal menu onclick sub menu dengan jquery ini silahkan copy kode-kodenya di bawah ini.
Kode CSS
#menu{height:45px;background:#464646;}
#menu ul,#menu li{margin:0;padding:0;list-style:none;}
#menu ul{height:45px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#ccc}
#menu ul li:hover a{background:#ccc;color:#333!important}
#menu input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:45px;line-height:45px;text-align:center;color:#fff}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#333}
#menu ul li ul li a{color:#333;width:180px;height:35px;line-height:35px;background:#ccc;}
#menu a.prett{padding:0 27px 0 14px}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ccc transparent transparent transparent;position:absolute;top:20px;right:9px}
#menu a.prett:hover::after,#menu ul li:hover a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#333 transparent transparent transparent;position:absolute;top:20px;right:9px}
#menu ul li ul li a:hover{background:#BABABA;}
@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;position:absolute; top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4;}
#menu ul li ul li a{width:100%;}
}
Kode HTML
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>Navigation</span></label>
<ul>
<li><a href='/' title="Home">Home</a></li>
<li><a href='#' title="Menu 1">Menu 1</a></li>
<li><a class='prett' href='#' title="Drop Menu">Drop Menu</a>
<ul class='menus'>
<li><a href='#' title="Drop Menu1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu3">Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title="Menu 2">Menu 2</a></li>
<li><a class='prett' href='#' title="Drop Menu1">Drop Menu 1</a>
<ul class='menus'>
<li><a href='#' title="Drop Menu 1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu 2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu 3">Drop Menu 3</a></li>
</ul>
</li>
</ul>
</nav>
Kode Javascript
<script type='text/javascript'>
var nav = $('#menu > ul > li');
nav.find('li').hide();
nav.click(function () {
nav.not(this).find('li').hide();
$(this).find('li').slideToggle();
});
$(function() {
$('#menu input').click(function () {
$('#menu ul').slideToggle()
});
});</script>
Dan jangan lupa, di blog Anda sudah terdapat jquery library berapa pun versinya.