Cara Memasang Menu Navigasi Lava Lamp di Blog

, 0 Comments

Memasang Menu Navigasi Lava Lamp



Kali ini Saya akan berbagi tips tentang Cara Memasang Menu Navigasi dengan Efek Lava Lamp

Behubung Saya sedang dalam tahap pembuatan template blogger jadi singkat saja ya, berikut cara penerapannya :

Buka Blog > Template > Edit HTML 

Pertama Tambahkan CSS di bawah ini tepat diatas </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;
}


Langkah selanjutnya tambahkan jQuery di bawah ini tepat diatas </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>


Terakhir untuk HTML terapkan dimana saja bebas, 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>


Untuk setelan lebar navigasi dan lainnya, silahkan Sobat kreasikan sendiri sesuai dengan selera.

DEMO


Dan yang ini dengan tambahan dropdown pada menu navigasi


CSS

.nav a{
  text-decoration:none;
}
.nav{
  height:70px;
  background:#222;
  position:relative;
}
.nav>ul{
  position:relative;
  list-style:none;
  padding:0;
  margin:0;
}
.nav>ul>li>ul{
  position:absolute;
  left:0;
  padding:0;
  margin:0;
  list-style:none;
}
.nav>ul>li:hover>ul li a{
  opacity:1;
  height:50px;
   transition:all .3s linear;
}
.nav>ul>li>ul a{
  display:block;
  color:#222;
  width:150px;
  line-height:50px !important;
  font:700 14px 'pt sans',sans-serif;
  background:#eee;
  border-bottom:1px solid #ddd;
  text-align:center;
  padding:0 5px;
   height:0;
  overflow:hidden;
  opacity:0;
    transition:all .3s linear .2s;
}
.nav>ul>li{
  float:left;
  position:relative;
}
.nav>ul>li>a{
  padding:0 20px;
  color:#fff;
  display:block;
  line-height:70px !important;
  font:400 15px 'PT Sans', sans-serif;
  text-transform:uppercase;
  text-decoration:none;
}
.lamp span{
  display:block;
  height:4px;
  background:#ee6666;
  position: relative;
}
.lamp span:after {
 bottom: 100%;
 left: 50%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
 border-color: rgba(238, 102, 102, 0);
 border-bottom-color: #ee6666;
 border-width: 4px;
 margin-left: -4px;
}
.lamp{
  position:absolute !important;
  height:4px;
  top:66px;
  background:#333;
  transition:all .3s linear;
}
.selected.active>a,.active>a{
  transition:all .3s linear;
  color:#fff;
}


jQuery

<script type='text/javascript'>
//<![CDATA[
if($('.nav>ul>li').hasClass('selected')){
$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
else{
  $('.nav>ul>li').first().addClass('active');
  var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
$('.nav>ul>li').hover(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});
},function(){
if($('.nav>ul>li').hasClass('selected')){
$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
else{
  $('.nav>ul>li').first().addClass('active');
  var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
});
//]]>
</script>


HTML

<div class='nav'>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Articles</a>
    <ul>
      <li><a href='#'>Tutorial</a></li>
      <li><a href='#'>Blogger</a></li>
      <li><a href='#'>Wordpress</a></li>
      <li><a href='#'>Design</a></li>
      <li><a href='#'>Susu Coklat</a></li>      
      </ul>
    </li>
    <li><a href='#'>Subscription</a>
        <ul>
      <li><a href='#'>Free</a></li>
      <li><a href='#'>Buy</a></li>
      <li><a href='#'>Silver</a></li>
      <li><a href='#'>Aisuka</a></li>
      </ul>
    </li>
    <li><a href='#'>About Us</a></li>
    <li><a href='#'>Contact Us</a></li>
    <li class='lamp'><span></span></li>
  </ul>
</div>


Simpan template.