How to make a funky animated menu with jQuery
Well Christmas for 2010 is coming fast and I thought I’d give you an early gift. In this post I will go over how to create a funky animated menu using jQuery. This menu will be a hover drop down menu. When you hover over the button a secret picture will be displayed. To give a better visual indication of being hovered over the text will change color. When the menu drops it will do a slight bounce and slide up smoothly.
Here’s what the menu will look like:
I first show you the code and go over the most essential parts that you might get tripped up over.
The HTML should be pretty simple to read. I use classes to assign the hidden images. We’ll see more about this in the CSS section. Please note I did load jQuery UI to get the bounce effect.
- #container is the main box in which every other item will live or be positioned to.
- #navigation will be positioned in the top right corner. It will be slightly raised about the #container
- #navigation li – We will float the list items so we can get a horizontal menu. List style is removed. I gave it a height to help older browsers.
- #navigation li a – We center the text and make it a block level element so that we can give it a width,height and padding.
- #navigation li a:hover – We said that we wanted the font to turn red when we hover over the buttons.
- .jared etc – These classes get applied to the the li elements. This allows us to have specific icons on each menu item
I first selected the anchor tags and said when ever they are hovered do two things. One when you are hovered. One when the mouse is taken off the button. In each section we are going to apply an animation. The first animation will drop the button and bounce when it reaches the end. The second section will slide the button back up to it’s original position. The sliding effect is done using padding. I found this to work better than using height. Also for some strange reason if you use the bounce on the slide up, jQuery would throw an error in IE making it absolutely useless.
If you use this example in your code please post an example we can see how you modified things!