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 silahkan ikuti langkah-langkahnya di bawah ini:

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 </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 sendiri..


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 !!.
Dilarang Copy-Paste artikel di blog ini dan apabila kami menemukan artikel dicuri tanpa mencantumkan sumber link blog Amplopcokelat.com maka tak segan akan kami laporkan !

Berlangganan artikel Gratis langsung via email...

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar