Memasang Menu Navigasi Lamp

Rabu, 21 Mei 2014

Laba-Laba Blog - Menu navigasi sangat penting untuk sebuah website atau blogger, sebagai contoh untuk menu navigasi salah satunya yang terdapat pada blogger ini dan menu navigasi dapat mempermudah pengunjung untuk berjelajah secara mendalam blogger kita, menu navigasi yang terdapat pada blogger salah satunya memberi kesan yang rapih. Pada tahun ini banyak sekali model-model menu navigasi salah satunya yang sedang kami bahas ini, berikut ikutilah langkah-langkah di bawah ini.

1. Masuk ke blogger
2. Dari dasbor, kemudian anda menuju ke template lalu ke edit html
3. Simpan kode CSS di bawah ini, di atas </style>

nav ul{
  position:relative;
  list-style:none;
}
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;

}

4. Kemudian, tambahkan kode Jquery di bawah ini dan simpan di atas </head> atau </body>

<script type='text/javascript'>
//<![CDATA[
$('.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});
});
//]]>

</script>

5. Tahap terakhir, silahkan anda simpan kode HTML ini dimana saja setelah </head> biasanya setelah header wrapper

<nav>
  <ul>
    <li><a href='#'>Home</a></li>
    <li class='selected'><a href='#'>Articles</a></li>
    <li><a href='#'>Portfolio</a></li>
    <li><a href='#'>About Us</a></li>
    <li><a href='#'>Contact Us</a></li>
  <li class='lamp'></li>
  </ul>
</nav>

6. Simpan
Resource : http://aisukablog.blogspot.com/2014/05/memasang-menu-navigasi-lava-lamp.html