Tutorial blog kali ini masih membahas seputar Menu Tab Navigasi Horizontal, tapi menu navigasi yang satu ini lebih cantik dan lebih menarik, karena apabila disorot mouse akan tampak terang. Ok kita mulai saja ke topik pembahasan yaitu Cara Membuat Menu Navigasi Horizontal dengan Efek Lavalamp jQuery Gooey. Kalau anda penasaran bagaimana bentuk atau model menu navigasi lavalamp jquery gooey,
Cara Membuat Menu Navigasi jQuery Gooey Style1. Pilih Template => Edit Html
2. Cari kode </head>
3. Tambahkan kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
Dan apabila di dalam template anda sudah ada kode tersebut maka tidak usah lagi dicantumkan.
4. Selanjutnya tambahkan kode berikut kedalam gadget, caranya :
- Pilih Tata Letak
- Pilih Tambah Gadget
- Pilih HTML/JavaScript dan masukkan kode berikut kedalamnya
<script type="text/javascript"> /* jQuery Gooey Menu * Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/ * Visit http://www.dynamicdrive.com/ for full source code */ jQuery.noConflict() jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; } }) var gooeymenu={ effectmarkup: '<li class="active"></li>', setup:function(usersetting){ jQuery(function($){ //on document.ready function snapback(dur){ if ($selectedlink.length>0) $effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx) } var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting) var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL var $menulinks=$menu.find('li a') var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL $effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected') } else{ var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined } setting.defaultselectedBool=$selectedlink.length $menulinks.mouseover(function(){ clearTimeout(setting.snapbacktimer) var $target=$(this) //alert($target.position().left+" "+$target.get(0).offsetLeft) $effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx) if (setting.defaultselectedBool==0) //if there is no default selected menu item $selectedlink=$target //set current mouseover element to selected element }) if ($selectedlink.length>0){ snapback(0) $menu.mouseleave(function(){ setting.snapbacktimer=setTimeout(function(){ snapback(setting.fxtime) }, setting.snapdelay) }) } $(window).bind('resize', function(){ snapback(setting.fxtime) }) }) } } </script> <style> ul li.active{ /*IE6 hack- hide gooey effect from that browser*/ _visibility: hidden; /*IE6 rule*/ } /* ######### Solid Block Menu CSS ######### */ ul.solidblockmenu{ margin: 0; margin-bottom:1em; padding: 0; list-style: none; position:relative; text-align: center; //set value to "left", "center", or "right"*/ } ul.solidblockmenu li{ display: inline; } ul.solidblockmenu li a{ font: bold 14px Arial, Verdana, sans-serif; color: #6E6E6E; padding: 8px; margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; } ul.solidblockmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/ position:absolute; width:0; border:1px solid black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; -moz-box-shadow: 2px 2px 4px rgba(120,120,120,0.7); -webkit-box-shadow: 2px 2px 4px rgba(120,120,120,0.7); box-shadow: 2px 2px 4px rgba(120,120,120,0.7); background:#d7ed93; background: -moz-linear-gradient(top, #d7ed93, #fff); background: -webkit-gradient(linear, center top, center bottom, from(#d7ed93), to(#fff)); background: linear-gradient(top, #d7ed93, #fff); } </style> <ul id="gooeymenu2" class="solidblockmenu">
<li><a href="
#">
Home</a></li>
<li><a href="
#">
Menu 1</a></li>
<li><a href="
#">
Menu 2</a></li>
<li><a href="
#">
Menu 3</a></li>
<li><a href="
#">
Menu 4</a></li>
<li><a href="
#">
Menu 5</a></li>
</ul> <script> gooeymenu.setup({id:'gooeymenu2', selectitem:1, fx:'swing'}) </script>
Keterangan :
Ganti warna merah dengan menu anda.
Selamat mencoba
membuat menu navigasi horizontal efel lavalamp jquery gooey, semoga bermanfaat.
Title : Menu Navigasi Horizontal dengan Efek Lavalamp jQuery Gooey
Description : Tutorial blog kali ini masih membahas seputar Menu Tab Navigasi Horizontal, tapi menu navigasi yang satu ini lebih cantik dan lebih menari...