Cara Pasang Menu Navigasi Lava Lamp

Kode Iklan Di Sini
Cara Pasang Menu Navigasi Lava Lamp - sobat bloggers berikut ini akan saya share kepada Anda cara pasang menu navigasi lava lamp di blogger. Untuk cara pasang-nya silahkna ikuti langkah-langkahnya di bawah ini:

Cara Pasang Menu Navigasi Lava Lamp

Cara Pasang Menu Navigasi Lava Lamp :

  • Buka akun blog Anda
  • masuk ke menu Edit HTML
  • Anda copy kode css di bawah ini lalu taruh tepat di atas kode ]]></b:skin> atau</style>
1. copy code css :

 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;
} 


2. copy code jquery di bawah ini dan taruh di atas kode  </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> 

3. Anda copy kode HTML di bawah ini, lalu taruh di mana Anda ingin meletakanya. Biasanya di bagian header-wrapper

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

Anda bisa mengatur/mengedit tampilan menu navigasi ini dengan kreasi anda sensdiri..


Menu Navigasi Lava Lamp dengan menu dropdown :

code 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;
} 


Code 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> 



code 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> 


Semoga bermamfaat :) dan jangan lupa komentarnya ya sob !!.

You Might Also Like:

Disqus Comments