Multilevel menu dengan aktivasi onclick memiliki keistimewaan sendiri karena tidak sinteraktif on mouse over. Dengan demikian maka konsentrasi kepada menu tidak diganggu dengan tampilan menu yang cepat berubah tampilan.
Source code utama pada artikel kali ini adalah sebagai berikut
- Pastikan coding di bawah ini masuk dalam head :
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
<style type=’text/css’>
.dropdown-menu>li
{ position:relative;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:pointer;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
display:none;
margin-top: -1px;
border-top-left-radius:0;
border-bottom-left-radius:0;
border-left-color:#fff;
box-shadow:none;
}
.right-caret:after,.left-caret:after
{ content:””;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
display: inline-block;
height: 0;
vertical-align: middle;
width: 0;
margin-left:5px;
}
.right-caret:after
{ border-left: 5px solid #ffaf46;
}
.left-caret:after
{ border-right: 5px solid #ffaf46;
}
</style>
<script type=’text/javascript’>//<![CDATA[
$(window).load(function(){
$(function(){
$(“.dropdown-menu > li > a.trigger”).on(“click”,function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass(‘left-caret’)||$(this).hasClass(‘right-caret’))
//$(this).toggleClass(‘right-caret left-caret’);
grandparent.find(‘.left-caret’).not(this).toggleClass(‘right-caret left-caret’);
grandparent.find(“.sub-menu:visible”).not(current).hide();
current.toggle();
e.stopPropagation();
});
$(“.dropdown-menu > li > a:not(.trigger)”).on(“click”,function(){
var root=$(this).closest(‘.dropdown’);
root.find(‘.left-caret’).toggleClass(‘right-caret left-caret’);
root.find(‘.sub-menu:visible’).hide();
});
});
});//]]></script>
- Untuk coding utamanya:
<!– Static navbar –>
<div class=”navbar navbar-default” role=”navigation”>
<div class=”container-fluid”>
<!–header saat mobile version–>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”.navbar-collapse”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>Proweb</a>
</div><!–end header saat mobile version–>
<div class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li class=”dropdown” style=”position:relative”>
<a href=”#” data-toggle=”dropdown”>Product <span class=”caret”></span></a>
<ul class=”dropdown-menu”>
<li>
<a class=”trigger right-caret”>Web Design</a>
<ul class=”dropdown-menu sub-menu”>
<li><a href=”#”>Basic Package</a></li>
<li><a href=”#”>Business Package</a></li>
<li><a href=”#”>Corporate Package</a></li>
</ul>
</li>
<li><a href=”#”>Web Application</a></li>
<li><a href=”#”>Web Maintenance</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div> - Source code lengkapnya:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>On Click Multi Level Menu</title><link href=”css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
<style type=’text/css’>
.dropdown-menu>li
{ position:relative;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:pointer;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
display:none;
margin-top: -1px;
border-top-left-radius:0;
border-bottom-left-radius:0;
border-left-color:#fff;
box-shadow:none;
}
.right-caret:after,.left-caret:after
{ content:””;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
display: inline-block;
height: 0;
vertical-align: middle;
width: 0;
margin-left:5px;
}
.right-caret:after
{ border-left: 5px solid #ffaf46;
}
.left-caret:after
{ border-right: 5px solid #ffaf46;
}
</style>
<script type=’text/javascript’>//<![CDATA[
$(window).load(function(){
$(function(){
$(“.dropdown-menu > li > a.trigger”).on(“click”,function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass(‘left-caret’)||$(this).hasClass(‘right-caret’))
//$(this).toggleClass(‘right-caret left-caret’);
grandparent.find(‘.left-caret’).not(this).toggleClass(‘right-caret left-caret’);
grandparent.find(“.sub-menu:visible”).not(current).hide();
current.toggle();
e.stopPropagation();
});
$(“.dropdown-menu > li > a:not(.trigger)”).on(“click”,function(){
var root=$(this).closest(‘.dropdown’);
root.find(‘.left-caret’).toggleClass(‘right-caret left-caret’);
root.find(‘.sub-menu:visible’).hide();
});
});
});//]]></script>
</head>
<body>
<div class=”container”>
<!– Static navbar –>
<div class=”navbar navbar-default” role=”navigation”>
<div class=”container-fluid”>
<!–header saat mobile version–>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”.navbar-collapse”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>Proweb</a>
</div><!–end header saat mobile version–>
<div class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li class=”dropdown” style=”position:relative”>
<a href=”#” data-toggle=”dropdown”>Product <span class=”caret”></span></a>
<ul class=”dropdown-menu”>
<li>
<a class=”trigger right-caret”>Web Design</a>
<ul class=”dropdown-menu sub-menu”>
<li><a href=”#”>Basic Package</a></li>
<li><a href=”#”>Business Package</a></li>
<li><a href=”#”>Corporate Package</a></li>
</ul>
</li>
<li><a href=”#”>Web Application</a></li>
<li><a href=”#”>Web Maintenance</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div> <!– /container –></body>
</html> - Demo dapat dilihat di http://aris.proweb.asia/dist/coba27.html dengan tampilan di bawah ini:
- Informasi lebih lanjut silahkan mengunjungi
– http://jsfiddle.net/chirayu45/YXkUT/16/
– http://fiddle.jshell.net/chirayu45/YXkUT/16/show/
– http://getbootstrap.com/
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
