jQuery is an easy and useful JavaScript library. If you are someone with basic knowledge of JavaScript you can easily insert jQuery plugins and effects. You do not need to be hardcore coder or developer for that. In this post you will see how to create some cool menus with jQuery and jQuery Color Plugin.
View Demo Download jQuery Color Menu
Things you need:
1. Jquery 1.3.2
2. Jquery Color Plugin
First we have is Basic HTML mark up. I am assigning class to each so I can control different color animation
[sourcecode language="html"]<div id="menu" class="first">
<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>
Do not forget to link the jQuery and color plugin in the header. Now we are going to add the color animation.
[sourcecode language="jscript"] $(".first a").hover(function() {$(this).animate({ backgroundColor: "#00aadd" }, 600);
},function() {
$(this).animate({ backgroundColor: "#303030" }, 400);
});
[/sourcecode]
That’s it. A little bit of code does the trick.
Code Explanation
We set the the background color using CSS #303030 (Dark Grey). When the page loads first we see the background color. Then using this code $(this).animate({ backgroundColor: “#00aadd” }, 600); we set the background color to #00aadd on mouseover .
Again, $(this).animate({ backgroundColor: “#303030″ }, 400); brings back background to original color when you mouseout. You can pretty play with the speed settings.
The second menu is basically same. Instead of using “backgoundColor” we use the “color syntax” to change the font color.
I got the idea for the third and fourth menu idea from David Walsh’s Link color animation post. I modified the code to use it here.
The third menu first it has a variable where the original background color is is stored. Then the second variable has the math function for the different colors when you mouseover. When you mouseout ‘backgroundColor’: original, set the background color to default CSS color. This is nice effect to add interactivity for the reader.
The fourth menus is just experimental. When you mouseout the background color does not sets back to original color instead it stays that color.
Obviously, there are more modification you can add and play around with settings. Download the menus and use it as you please. If you have suggestions to improve it please feel free to comment
Tested in : IE 7 IE8 (using IE Tester) Firefox and Safari.
Here is the full jQuery :
$(document).ready(function(){
$(".first a").hover(function() {
$(this).animate({ backgroundColor: "#00aadd" }, 600);
},function() {
$(this).animate({ backgroundColor: "#303030" }, 400);
});
// font color animation
$(".second a").hover(function() {
$(this).animate({ color: "#00eeff" }, 400);
},function() {
$(this).animate({ color: "#FFFFFF" }, 500);
});
// Fun with Color. Differnt font color each time hover
// Orginal code can be found http://davidwalsh.name/jquery-random-color-animate
original = $(‘.third a’).css(‘background-color’);
$(‘.third 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}, 1000);
},function() { //mouseout
$(this).animate({‘backgroundColor’: original},500);
});
// Hover Color Does not change back to original
$(‘.fourth 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);
});
});
[/sourcecode]
Updat: A stop been added to prevent animation building queue buildup.Thanks Andy for catching it Read more?
Comments
Due to a high number of spam comments on site we have disabled comment system at desizntech.info. In a few days comments will be available again after we delete spam.