Give Lavalamb Effect to Menu Using jQuery

errrmm... lama ga posting gara pulsa abis, wkwkkwkwkwkw . Sekarang posting di hari sabtu waktunya malming untuk para blogger . (Blogger juga butuh malming hohoho..)

Yoyoy langsung ke topiknya . Sekarang tentang lavalamp effect pada menu . tau ga sih lavalamb menu ? kalo lavalamp menu coba cari di google, pasti deh ketemu . sekarang saya mau bahas gimana cara buat effectnya . Untuk demonya biar lebih jelas disini .

Demo

hmm gimana ? cukup bagus kan effect nya ? kalo menu nya sih jelek . lha emang aq ga edit menu nya, males boo.. yg penting effect nya cui..

langsung aja nih cara nya bro sist .

1. Pertama masukan script jQuery ini .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'>


2. Kedua nih plugin jQuery buat effect nya

<script src='http://granoblog.googlecode.com/files/menueffect.js' type='text/javascript'>


3. Ini css nya

ini css untuk effect nya.. bisa background atau border .

ini untuk background

.lava {
position: absolute;
z-index: 100;
background: #000;
}

ini untuk border


.lava {
position: absolute;
z-index: 100;
border: 2px solid #000;
padding: 1px 2px;
}

mao yg laen ? suka2 kamu deh..

ini css untuk menu yg saya buat .

#menu {
width: 770px;
height: 2.5em;
background-color: #999;
margin-bottom: 1em;
}
#menu li {
float: left;
margin: 0;
list-style-type: none;
text-align: center;
}
#menu li.a {
width: 80px;
}
#menu li.b {
width: 150px;
}
#menu li.c {
width: 170px;
}
#menu li.d {
width: 120px;
}
#menu li.e {
width: 100px;
}
#menu li a {
display: block;
line-height: 2.5em;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#menu li a:hover {
text-decoration: underline;
}


ini sbenarnya ga perlu kalo sobat udah punya menu sendiri .

4. javascriptnya..


<script type='text/javascript'>
$(document).ready(function(){
$('#menu ul').foxiblob({className:'lava', opacity:1, speed:1000});
});
</script>


Nb: Untuk #menu ul kalo sobat udah punya menu sendiri, masukin css menu sobat sendiri . Misal blog sobat punya menu yg css-nya "#menu2 ul" . tinggal masukan ajah jadi $('#menu2 ul') .

5. HTMLnya .


<div id='menu'>
<ul>
<li><a href='#'>start</a></li>
<li><a href='#'>link 1</a></li>
<li><a href='#'>very long link</a></li>
<li><a href='#'>url</a></li>
<li><a href='#'>testlink</a></li>
</ul>
</div>


Nb: kalo sobat udah punya menu sendiri yah ga usah pake ginian ..

Hmm gampang kan ? saya rasa mudah ko .. makasih yah udah sempetin baca sob . gimana menurut sobat, bagus ga ?