Jika kita melihat makin banyak website, makin banyak sesuatu hal yang ingin kita ketahui. Pada umumnya menu navigasi pada navbar begitu di hover, kemungkinan menu tsb akan dishadow, atau bisa juga atau dihighlighting secara block.
Pada edisi tutorial kali ini, kita akan membuat menu navigasi yang muncul baris ketika di hover menu navbar tersebut. Jika masih bingung maksudnya, pernah melihat web detik.com. Pasti anda sudah memiliki gambaran yang dimaksud garis pada menu navbar.
Kalo pun anda masih bingung, kira-kira kita akan membuat apa ?. Silahkan klik link Live Preview dibawah ini yang merupakan target dari output kita.
Step-1:
Buatlah file index.html seperti code dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="tutorial-boostrap-merubaha-warna">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Tutorial Boostrap </title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
<style type="text/css">
.navbar-inverse {
background-color: #3b5998;
font-size:18px;
}
.navbar-brand{
float: none !important;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<div id='navigasi'>
<div class="container">
<div class='row ab-navigation'>
<div class='containers'>
<div class='abnavbar navbar-ab'>
<div class='navbar-inner'>
<div class='nav-collapse'>
<ul class='nav visible-desktop' id='menu-menu-1'>
<li><a href='/'>Home</a></li>
<li><a href='#'>World</a></li>
<li><a href='templates'>Politics</a></li>
<li><a href='about.html'>Sports</a></li>
<li ><a href="">Technology</a></li>
<li><a href='blog'>Music</a></li>
<li class='kanan'><a href='go/login'>Login</a></li>
</ul>
</div>
</div>
<div class='nav-line' style='left: 311.234375px; width: 100px; overflow: hidden;'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.navbar -->
<script src='assets/js/jquery.min.js' type='text/javascript'></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/ab-navigasi.js"></script>
</body>
</html>
Step-2:
Membuat file css seperti script dibawah ini :
.abnavbar .nav>li {
float: left;
}
.abnavbar .nav>li>a {
float: none;
padding: 10px 15px 10px;
color: #777777;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
.abnavbar .nav>li>a:focus,.abnavbar .nav>li>a:hover {
background-color: transparent;
color: #333333;
text-decoration: none;
}
.abnavbar .nav>.active>a,.abnavbar .nav>.active>a:hover,.abnavbar .nav>.active>a:focus {
color: #555555;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
#navigasi ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigasi .ab-navigation .container {
position: relative;
}
#navigasi .ab-navigation {
opacity: 1;
background-color: #4e5563;
box-shadow: 0 1px 0 rgba(0,0,0,0.1) inset, 0 -1px 0 rgba(0,0,0,0.1) inset;
min-height: 46px;
-webkit-transition: top 0.3s ease-in-out;
-moz-transition: top 0.3s ease-in-out;
-o-transition: top 0.3s ease-in-out;
-ms-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
#navigasi .ab-navigation .abnavbar .nav > li > a {
line-height: 25px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
/*padding: 13px 20px;*/
font-family: raleway,lato,arial,sans-serif;
}
#navigasi .ab-navigation.shrunk .abnavbar .nav > li > a {
line-height: 25px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#navigasi .ab-navigation.fixed {
opacity: 0.95;
margin-bottom: 0;
width: 100%;
top: 0;
left: 0;
position: fixed;
}
.navbar-ab .navbar-inner {
background: transparent;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
filter: none;
}
.abnavbar {
margin-bottom: 0;
float: left;
position: relative;
width:100%;
}
li.kanan {
float: right!important;
}
.nav-line {
background-color: #E31912;
position: absolute;
height: 8%; /* the thick of line on menu*/
bottom: 0;
left: 0;
}
/*Make menu color consistent alhtough hover it*/
.navbar-ab .nav-collapse .nav > li > a, .navbar-ab .nav-collapse .dropdown-menu a {
color: #EFEFEF;
}
Step-3:
Membuat file java script dengan memanfaatkan jquery.
jQuery(function() {
jQuery('.ab-navigation .abnavbar .nav > li > a').animate({ color: '#777777'}, 10);
jQuery('.ab-navigation').animate({ backgroundColor: '#FFFFFF'}, 100);
var didresize = false;
jQuery(window).resize( function() {
});
setInterval(function() {
if ( didresize ) {
didresize = false;
}
}, 3000);
jQuery('.abnavbar .nav li').mouseover(function(){
jQuery( this ).addClass('open');
});
jQuery('.abnavbar .nav li').mouseout(function(){
jQuery( this ).removeClass('open');
});
resetNavLine(250);
jQuery('.nav li').mouseover(function(){
jQuery('.nav-line').stop();
jQuery('.nav-line').animate({
left : jQuery(this).offset().left-jQuery('.ab-navigation .containers .abnavbar').offset().left,
width: jQuery(this).width()
}, 250);
});
jQuery('.nav li').mouseout(function(){
resetNavLine(250);
});
});
function changeHeader(){
var y;
y = jQuery(window).scrollTop();
jQuery('.ab-navigation').stop();
}
function resetNavLine(time){
// didScroll = true;
jQuery('.nav-line').stop();
if(jQuery('.nav').children('li').hasClass('current-menu-item')){
jQuery('.nav-line').animate({
left : jQuery('.current-menu-item').offset().left-jQuery('.ab-navigation .containers .abnavbar').offset().left,
width: jQuery('.current-menu-item').width()
}, time);
}else if(jQuery('.nav').children('li').hasClass('current-menu-ancestor')){
jQuery('.nav-line').animate({
left : jQuery('.current-menu-ancestor').offset().left-jQuery('.ab-navigation .containers .abnavbar').offset().left,
width: jQuery('.current-menu-ancestor').width()
}, time);
}else{
jQuery('.nav-line').animate({
width : 0
});
}
}
Bagi anda yang memerlukan source codenya, silahkan klik link dibawah. Source code sudah terlampir dengan Bootstrap, Jquery dan librari lainnya :
