Jquery Menu Lavalamp
Jquery Menu Lavalamp
Menu salahsatu yang aku sukai pada sturktur template blogger , ibarat kata menu adalah penunjuk arah ketika kita ingin menelusuri sebuah situs/ blog. Diluar sana banyak tutorial menu yang ditawarkan dengan aneka ragam tampilan , mulai dari yang klasik sampe sang asyk. Kali ini saya akan menawarkan menu karyanya [ DTE ]
[-Kustomisasi-]
- Cari kode </head> dan masukan kode dibawah ini tepat diatas kode </head> atau dibawah kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://reader-download.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>
- Sekarang cari kode ]]></b:skin> dan masukan kode dibawah ini tepat diatasnya
#lava {
background-color:#274D5A;
background-image:-webkit-linear-gradient(top,#274D5A,#1E3B45);
background-image:-moz-linear-gradient(top,#274D5A,#1E3B45);
background-image:-ms-linear-gradient(top,#274D5A,#1E3B45);
background-image:-o-linear-gradient(top,#274D5A,#1E3B45);
background-image:linear-gradient(top,#274D5A,#1E3B45);
-webkit-box-shadow:
inset 0px 1px 0px rgba(255,255,255,0.2),
0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0px 1px 0px rgba(255,255,255,0.2),
0px 1px 2px rgba(0,0,0,0.4);
box-shadow:
inset 0px 1px 0px rgba(255,255,255,0.2),
0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
position:relative;
text-align:center;
height:30px;
}
#lava ul {
margin:0px 0px;
padding:0px 0px;
list-style:none;
position:absolute;
left:0px;
top:0px;
z-index:100;
}
#lava ul li {
position:relative;
float:left;
}
#lava ul li a {
display:block;
padding:0px 15px;
font:bold 11px/30px Tahoma,Verdana,Arial,Sans-Serif;
text-decoration:none;
color:#70A4B2;
text-shadow:0px -1px 0px rgba(0,0,0,0.4);
}
#lava #box {
position:absolute;
left:0px;
top:0px;
z-index:50;
background-color:#1E3B45;
background-image:-webkit-linear-gradient(bottom,#274D5A,#1E3B45);
background-image:-moz-linear-gradient(bottom,#274D5A,#1E3B45);
background-image:-ms-linear-gradient(bottom,#274D5A,#1E3B45);
background-image:-o-linear-gradient(bottom,#274D5A,#1E3B45);
background-image:linear-gradient(bottom,#274D5A,#1E3B45);
}
#lava #box .head {
height:30px;
border-left:2px solid #AD1717;
}
#lava li ul {
width:170px;
height:auto;
background-color:#274D5A;
position:absolute;
top:100%;
left:0px;
z-index:77;
border-left:2px solid #AD1717;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
display:none;
}
/* CSS Fallback */
#lava li:hover ul.fallback {display:block;}
#lava li li {
float:none;
display:block;
text-align:left;
}
#lava li li a {padding:0px 15px;}
#lava li li a:hover {background-color:#1E3B45;}
- Dan kembali pada kode </head> , letakan kode ini tepat diatasnya
<script type="text/javascript">
//<![CDATA[
// Original: http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery
// Modified by Taufik Nurrohman: http://hompimpaalaihumgambreng.blogspot.com
$(function() {
// Append the floating bar
$('#lava').append('<div id="box"><div class="head"></div></div>')
// remove the fallback class if JavaScript enabled
.find('ul.fallback').removeClass('fallback');
// Retrieve the selected item position and width
var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left),
default_width = $('#lava li.selected').width();
// Set the floating bar position and width
$('#box').css({left: default_left});
$('#box .head').css({width: default_width});
// if mouseover the menu item
$('#lava > ul > li').mouseenter(function() {
// Get the position and width of the menu item
left = Math.round($(this).offset().left - $('#lava').offset().left);
width = $(this).width();
// Set the floating bar position, width and transition
$('#box').stop(false, true).animate({left:left},{duration:1000, easing:'easeOutElastic'});
$('#box .head').stop(false, true).animate({width:width},{duration:1000, easing:'easeOutElastic'});
$('ul', this).filter(':not(:animated)').slideDown(600, 'easeInOutExpo');
// if user click on the menu
}).click(function() {
// reset the selected item
$('#lava li').removeClass('selected');
// select the current item
$(this).addClass('selected');
});
// If the mouse leave the menu item,
// hide the dropdown menu and reset the floating bar to the selected item
$('#lava li').mouseleave(function() {
$('ul', this).slideUp(600, 'easeOutQuart');
}).parents('#lava').mouseleave(function() {
// Retrieve the selected item position and width
default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
default_width = $('#lava li.selected').width();
// Set the floating bar position, width and transition
$('#box').stop(false, true).animate({left:default_left},{duration:1500, easing:'easeOutElastic'});
$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing:'easeOutElastic'});
});
});
//]]>
</script>
- Setelah selesai , silahkan sobat pasang kerangka menu dibawah ini dan tentukan dimana menu lavalamp akan diletakan
<nav id='lava'>
<ul>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Profil</a></li>
<li><a href='#'>Jurnal</a>
<ul class='fallback'>
<li><a href='#'>2007</a></li>
<li><a href='#'>2008</a></li>
<li><a href='#'>2009</a></li>
<li><a href='#'>2010</a></li>
<li><a href='#'>2011</a></li>
<li><a href='#'>2012</a></li>
</ul>
</li>
<li class='selected'><a href='#'>Komentar</a></li>
<li><a href='#'>Kontak</a></li>
<li><a href='#'>Cari</a>
<ul class='fallback'>
<li><a href='#'>CSS</a></li>
<li><a href='#'>JQuery</a></li>
<li><a href='#'>HTML</a></li>
<li><a href='#'>JavaScript</a></li>
</ul>
</li>
</ul>
</nav>
Perhatikan kode yang saya blok class='selected' itu menentukan dimana lava akan berhenti.