Responsive Horizontal Hidangan Onclick Sub Hidangan Jquery
Responsive Horizontal Menu Onclick Sub Menu Jquery - Kebanyakan horizontal hidangan memakai efek hover untuk menampilkan sub menunya baik yang memakai CSS maupun Jquery. Kebetulan kemarin ada sahabat Kompi yang menanyakan ihwal cara menciptakan horizontal hidangan namun memakai onclick untuk menampilkan sub menunya. Artinya sub menunya akan muncul dengan cara klik pada hidangan induknya, begitu pun untuk menyembunyikannya.
Kali ini aku akan mencoba membuat responsive horizontal hidangan pure CSS yang pernah aku 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 hidangan pure CSS ini yang sebelumnya tidak sanggup berfungsi saat diakses memakai mobile. Apakah responsive horizontal hidangan ini menjadi berfungi pada mobile dengan onclick sub hidangan dengan Jquery? Saya tunggu respon dari sahabat yang memakai mobile untuk mencoba hidangan ini.
Penampakan responsive horizontal hidangan onclick sub hidangan 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 hidangan onclick sub hidangan 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="Responsive Horizontal Menu Onclick Sub Menu Jquery ">Home</a></li>
<li><a href='#' title="Responsive Horizontal Menu Onclick Sub Menu Jquery ">Menu 1</a></li>
<li><a class='prett' href='#' title="Responsive Horizontal Menu Onclick Sub Menu Jquery ">Drop Menu</a>
<ul class='menus'>
<li><a href='#' title="Responsive Horizontal Menu Onclick Sub Menu Jquery ">Drop Menu 1</a></li>
<li><a href='#' title="Responsive Horizontal Menu Onclick Sub Menu Jquery ">Drop Menu 2</a></li>
<li><a href='#' title="Responsive Horizontal Menu Onclick Sub Menu Jquery ">Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title="Responsive Horizontal Menu Onclick Sub Menu Jquery ">Menu 2</a></li>
<li><a class='prett' href='#' title="Responsive Horizontal Menu Onclick Sub Menu Jquery ">Drop Menu 1</a>
<ul class='menus'>
<li><a href='#' title="Responsive Horizontal Menu Onclick Sub Menu Jquery ">Drop Menu 1</a></li>
<li><a href='#' title="Responsive Horizontal Menu Onclick Sub Menu Jquery ">Drop Menu 2</a></li>
<li><a href='#' title="Responsive Horizontal Menu Onclick Sub Menu Jquery ">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.
Sumber https://www.kompiajaib.com/
0 Response to "Responsive Horizontal Hidangan Onclick Sub Hidangan Jquery"
Posting Komentar