Colorfull Menu Using Jquery Color Plugin

Posting kali ini masih sekitar jQuery Color plugin . Sekarang mencoba menerapkan color plugin di menu . Biar lebih cepat dan jelas langsung ajah liat demonya disini, tapat nya dibagian atas sendiri di demo page .

Demo

Color plugin kali ini memberikan banyak warna pada menu saat mouseover . Warna yg berubah-ubah secara random saat mouseover . Cukup menarik untuk sahabat blogger yang suka bermain2 dengan warna di blognya .
Langsung ajah cara buat nya ya bro...

1. Ini Script jquery nya. masukan tepat di atas </head;>


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


Nb: Kalo udah ada biarin ajah biar ga doble .

2. Ini script color plugin nya .

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


Nb: Kalo udah ada biarin ajah biar ga doble .

3. Ini css nya..

#menu{
margin:0 auto;
width:600px;
height:40px;
}
#menu ul {
margin:0;
list-style-type:none;}
#menu2 ul li{
float:left;
padding-left:10px;
}
.colormenu a {
font: 20px Georgia;
font-style:italic !important;
color:#fff;
text-decoration:none;
background-color:#cc0022;
padding:5px;
border:none; -webkit-border-radius: 10px; -moz-border-radius: 10px;}
#menu3{
margin:0 auto;
width:600px;
height:40px;
}

Nb yg jelas bisa di edit2 sendiri sesuai selera .

4. ini javascriptnya untuk memberikan effect merubah warna background nya .

<script type='text/javascript'>
$(document).ready(function(){
$('.colormenu a').hover(function() { //mouseover
var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$(this).animate({'backgroundColor': col},500);
},function() { //mouseout
$(this).animate({'backgroundColor': col},500);
});
});
</script>

5. Ini tag HTML nya . idealnya di letakan di widget bagian bawah header . Tapi itu cuma sugesti, wkwkwk terserah mau di tempatin dimana .


<div id="menu" class="colormenu">
<ul>
<li> <a href="#"> Home</a></li>
<li> <a href="#"> About</a></li>
<li> <a href="#"> Portfolio</a></li>
<li> <a href="#"> Contact</a></li>
</ul>
</div>


Nb: Yang pasti ganti url dan nama link sesuai kebutuhan.. hoho..

nah jadi deh.. gwampang bgt kan ? bagus ga sih ? moga bermanfaat aja deh .