Cara Pasang Menu Navigasi Lava Lamp


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 !!.

Comments

Post a Comment

۝ Peraturan dalam berkomentar :

☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

☭ Copyright © 2014 - 2015 - Anaktimor17 Blog® by Markus Kono ✓

Popular posts from this blog

Contoh Surat Lamaran Kerja di Indomaret Terbaru 2018

Cara Melamar Kerja PT. Musashi Auto Parts Indonesia 2019

Cara Melamar Kerja di PT Astra Honda Motor Secara Online