Menu Navigasi Lava Lamp

by Hm Ba

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Menu Navigasi</h1>
<nav>
  <ul>
    <li><a href='#'>Home</a></li>
    <li class='selected'><a href='#'>Hello</a></li>
    <li><a href='www.ar1web.com'>Blog</a></li>
    <li><a href='#'>About Us</a></li>
    <li><a href='#'>Contact Us</a></li>
  <li class='lamp'></li>
  </ul>
</nav>
<div style='clear:both'/>
<div class='credit'>From<a href='http://www.ar1web.com/'>Ar1web</a></div>

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans);
body{
  background:#fff;
  margin:0 auto;
}
a{
  color:#00bfff;
  text-decoration:none;
}
h1{
  font:400 35px 'pt sans',sans-serif;
  color:#333;
  text-align:center;
}
.credit{
  text-align:center;
  margin-top:30px;
  font-size:15px;
  color:#333;
}
nav ul{
  position:relative;
  list-style:none;
  text-align:center;
}
nav ul li{
  float:left;
}
nav ul li a{
  padding:25px 15px;
  background:#eee;
  color:#333;
  display:block;
  font-family: 'PT Sans', sans-serif;
  text-decoration:none;
}
.lamp{
  position:absolute;
  height:4px;
  background:#333;
  transition:all .3s linear;
}
.selected.active a,.active a{
  background:#00bfff !important;
  transition:all .3s linear;
  color:#fff;
}

JavaScript

$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
$('nav ul li').mouseenter(function(){
  $('nav ul li').removeClass('active');
  $(this).addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
  });
$('nav ul li').mouseout(function(){
  $('nav ul li').removeClass('active');
  $('.selected').addClass('active');
  var currentleft=$('.selected').position().left;
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
});