How to Make a Smooth Animated Menu with jQuery
Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu and animate it with some smooth effects.
The Goal – One Smooth Menu
Here’s a demo of what we’ll end up with by the end.
Introduction – An explanation of easing
The menu has such a smooth animation because of a thing called “easing”. Adobe’s definition in the Flash Developer Center is a little more complete:
“The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.”
Thanks to the magic of the jQuery Easing plugin, we can now use easing outside of Flash and Actionscript environments. Download it on the official project site.
Step 1 – Set up the Structure
Before starting with any jQuery, we’ve got to build a quick menu structure with XHTML and load in the required project files. Make new XHTML, CSS, and javascript documents. I’ve chosen to name each of mine “animated-menu”. Make two folders in the root directory for images and javascript. I’ve attached a screenshot of my folder structure to clarify: 
Nothing out of the ordinary here. Start by loading in the necessary libraries and external files in the head. I have chosen to load jQuery from the Google code archive online, while the easing plugin from above is placed into the “js” folder. The order of loading is important!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smooth Animated jQuery Menu</title> <link rel="stylesheet" href="animated-menu.css"/> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="animated-menu.js" type="text/javascript"></script> </head>
Then copy in this menu structure into the body:
<body> <p>Rollover a menu item to expand it.</p> <ul> <li class="green"> <p><a href="#">Home</a></p> <p class="subtext">The front page</p> </li> <li class="yellow"> <p><a href="#">About</a></p> <p class="subtext">More info</p> </li> <li class="red"> <p><a href="#">Contact</a></p> <p class="subtext">Get in touch</p> </li> <li class="blue"> <p><a href="#">Submit</a></p> <p class="subtext">Send us your stuff!</p> </li> <li class="purple"> <p><a href="#">Terms</a></p> <p class="subtext">Legal things</p> </li> </ul> </body> </html>
Menu items have a class assigned to it that will designate the color of the block. Within each menu block is a title and subtitle that will be hidden by default.
Step 3 – Style with CSS
Now that the menu structure is in place we’ll add some basic styles to neaten up and arrange the menu horizontally. Overflow must be set to overflow for each list item. This will ensure that the subtitle for each item will not display until the height expands to fit.
body{
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
}
ul{
margin:0;
padding:0;
}
li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
a{
color:#FFF;
text-decoration:none;
}
p{
padding:0px 5px;
}
.subtext{
padding-top:15px;
}
/*Menu Color Classes*/
.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;}Step 4 – Animate with jQuery
All of our jQuery code will go into the javascript file created earlier. It will be called “animated-menu.js” if you’ve been following my model.
$(document).ready(function(){
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});There are two actions in the code above. When the mouse moves over a menu item, that item starts an animation where it expands to 150px tall over 0.6 seconds. The easing applied through the plugin is ‘easeOutBounce’ which causes the box to “bounce” a little as it reaches the end of the animation (“out”). When the mouse is moved off the animation to the starting size is triggered.
If you are using this within the context of a larger site, simply substitute the element selected (currently “li”) for the mouse events to the necessary selector.
The stop() method is chained before the animate in order to prevent a buffer from building where the animation will loop repeatedly if the mouse is moved around quickly over it. An article on Learning jQuery covers this solution in greater depth.
Step 5- Add Some Flair
I’ve added background images to each of the menu items in the live version and source files to illustrate some design possibilities. There are plenty of other creative ways to add some personality to the menu. Go on and experiment. If you come up with anything remarkable, be sure to share it with us in the comments.
Discussion
January 22nd, 2009 at 10:40 AM
This is great find! I’ll try to apply this one. I’m very new to web design and still trying to learn more. I’m just bothered though on the navigation that it “bounces” (if that’s the term) when you mouse-over on the menu, how can you make the effect smoother and make it like an ordinary slide down?
Thanks, Zach!
January 22nd, 2009 at 11:21 AM
“Here’s a demo of what we’ll end up with by the end.”
Your link’s href attribute contains a hash character instead of a proper link.
January 22nd, 2009 at 1:06 PM
@Eric That is as simple as changing the easing property in the animate() method. You can mess around with other available easing types on the plugin’s page. (Look for the box that says “The Clicker”) http://gsgd.co.uk/sandbox/jquery/easing/
@Chris Cohen – Oops! Thanks for the tip, I’ve updated the link.
January 22nd, 2009 at 1:20 PM
Thanks for this! I love it! I love the bounce effect too. I’m using it on a page laid out with CSS. I have two divs below it for right and left columns, one is float right and one is float left. Even though the z-index of the div containing the menu is higher than the two others, when the menu expands it makes the floats bounce all over the page. Do you know how I can fix this?
January 22nd, 2009 at 1:20 PM
Hey, nice article.
Just wanted to inform you that in the second code-snippet containing the actual body mark-up, you haven’t specified class=”subtext” on all of the sub paragraphs, only on the second. Whereas in the live demo this class is included. For it is essential to produce the desired effect.
Thanks,
–Liam
January 22nd, 2009 at 2:51 PM
A nice effect on the animation. It would be nice perhaps to show the dropdown if JS in unavaliable, using:
on :hover. You could then use JS to overwrite those settings and add the animation
January 22nd, 2009 at 2:57 PM
Thanks!
Anyone that needs to know the CSS to make the other stuff not move:
Put everything in a div with relative positioning:
#cont {
position:relative;
width:600px;
margin: 0 auto;
}
Put the navigation in a box and give it a z-index of 2 or higher, and position absolute.
No other div needs a z-index. If you DO give them a z-index, then make this one’s higher than all the others.
#nav {
width:600px;
height:50px;
background: red;
position:absolute;
z-index:2;
}
Put all your other stuff in divs (duh) with position absolute
#main {
width:600px;
height:auto;
background: green;
margin-top:50px;
position:absolute;
}
January 22nd, 2009 at 5:22 PM
@Liam – Thanks for the tip off, I’ve gone ahead an added the additional classes in. Sorry for any confusion!
January 23rd, 2009 at 10:17 AM
How does this work with a flash or other media block below? I have found some other animated menus and stopped trying to use them when they drop down behind the items that are in the next div down on the screen.
January 23rd, 2009 at 8:08 PM
it looks like a mootool boxes !
I like it very nice
January 25th, 2009 at 11:29 PM
Hi Zach,
Thanks for the tip! I didn’t know there’s more to it. Kudos!
January 31st, 2009 at 6:12 AM
This is so AWESOOMME!!!!!!
Thank you soooo much for this bud!!
Really love it!!!
^0^
——-
February 9th, 2009 at 3:51 PM
Hello, I am also having the same issue of trying to put an image directly below the menu, and have the menu drop down over the image. I tried what Nate said using CSS, but am still unable to get it to work. Any ideas or examples someone can post?
February 9th, 2009 at 8:19 PM
@Robert Depending on the type problem you are encountering, this article may be able to help out a little. It’s about using the position property of CSS to get the z-index working.
Squish the Z-Index Bug
Let us know if that straightened you out!
February 10th, 2009 at 11:22 AM
Awesome! Thanks Zack, that helped me fixed the issue perfectly!
February 13th, 2009 at 6:54 PM
Really Impressive. Thank you for the explanation.
March 4th, 2009 at 6:46 AM
Hi guys! This is really great tutorial, but I’ve just started to learn jquery and i have one question: I can’t understand one thing – what does “queue” parameter means? Thanks for the answer
March 5th, 2009 at 8:26 AM
@Denis
The queue:false is responsible for keeping the animations from stacking.
Let’s say you were in a position were you repeatedly moused over the menu item, ordinarily the animation would continue going until it’s accounted for each mouseover. This isn’t any good. Queue:false and the stop() method after animate both work together to fix this problem.
March 5th, 2009 at 8:42 AM
Thanks a lot for explanation Zach! =)
March 9th, 2009 at 6:16 AM
Really great tutorial! A great help!
I’m quite new to jquery and was wondering if theres any way to shrink the file? The page needs to load a bit quicker and I’m sure i’ve seen a jquery file that was shrunk to suit the application.
Thanks
Dan
March 9th, 2009 at 8:17 AM
thank you, i will use it
March 21st, 2009 at 3:32 PM
I was wondering if there was a way to make the menu to pop up instead of down?
March 23rd, 2009 at 4:07 AM
I really like this script! I’m trying to integrate it with my site to give it a little more flair.
How do you limit the animation to only one set of listitems ? I use list item elements for my top navigation as well as my side bar lists. I only want it to work on the #main-nav div list items, not the #sidebar div.
March 23rd, 2009 at 8:49 AM
Kien – I was wondering the same thing. It’s affecting every list on my site!
March 23rd, 2009 at 9:06 AM
Kein – figured it out. To keep it from being applied to every list on the site, apply a class to the UL, such as “expander”. Then update the animated-menu.js by replacing this:
$(“li”).mouseover(function(){
…with this…
$(‘ul.expander li’).mouseover(function(){
This appears in 2 spots in the .js. You’re set!
March 23rd, 2009 at 9:14 AM
@Brian & Kien
Sounds like you two could use some good old CSS hierarchy! The demonstration above is more of a proof of concept, and it’s not intended for straight copy/paste as is.
It’s a simple enough fix, but you’ll have to adjust for your own needs. I’ll use Kien’s case as an example.
All references to the “li” list items in the CSS and jQuery should also include the parent div that you’d like to include it in. For instance:
$(“li”).mouseout(function(){
would become
$(“#main-nav li”).mouseout(function(){
Apply the same logic to the CSS and you should be in great shape!
@Michael
You know, while that seems like a simple enough request, I don’t believe that the way I have it structured currently would allow for that sort of change.
If I had to make a recommendation, I would say try using negative relative positioning and an expanding div with overflow on to show each in reverse. I’m sorry if that’s vague, and doesn’t directly help you out. I’ll put it on my to do list for a future post. Good luck!
March 24th, 2009 at 6:08 PM
Thanks for the tip. I figured it was something like that but wasn’t sure. I’m just not too familiar with javascript. I’m more of a back-end developer.
March 25th, 2009 at 10:29 AM
In IE the first button looks retarded…
March 26th, 2009 at 7:12 PM
I was wondering if there is a param to build the menus vertical and have the sub menus slide out horizontal!
Awesome plugin!
April 6th, 2009 at 4:37 PM
hi zach,
many, many. many thanks for that little script. i tweaked it al little bit to fit my needs. it’s driving now the vertical navigation bar on my portfolio website.
stephan
May 11th, 2009 at 11:52 AM
Hi there!
I think your thing is really great and have found a FANTASTIC way to have static menu items. Without any bulk or even more classes!
If you want your menu item to be a ‘dropper’ as i have called it then you just add….
I worked out you can have more than one class on an element
Just edit the .js file so it looks like this…
$(document).ready(function(){
//Fix Errors – http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
//Remove outline from links
$(“a”).click(function(){
$(this).blur();
});
//When mouse rolls over
$(“.dropper”).mouseover(function(){
$(this).stop().animate({height:’150px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
});
//When mouse is removed
$(“.dropper”).mouseout(function(){
$(this).stop().animate({height:’50px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
});
});
I have changed the $(‘li’) to $(‘.dropper’) meaning it will be attached not to an element but to anything with the class ‘dropper’.
Hope this helps anyone….
P.S. To make the class more unique just change it to something random!
May 19th, 2009 at 6:12 AM
This is a verry nice animated menu. I was looking for an animated menu en found this one verry quick.
Would be handy if you would extend this exemple with actual menu items in the menu instead of an empty menu.
I’m not that in to JS and CSS and having much trouble to get a menu in the LI tags that are droping down.
Another point of view is the fixed hight of the menu.
The height is fixed in the JS code, but what if the first LI must expend with 100px, but the second with 200px?
May 19th, 2009 at 7:16 PM
Great tutorial! I’ve got it working pretty well. One thing I’d like to accomplish is to add hoverIntent to it but it doesn’t want to work. Am I missing anything besides replacing ‘mouseover’ with ‘hoverIntent’? Thanks!
And again, really great tutorial!
May 19th, 2009 at 8:54 PM
@Chris
I’ll start by saying that I have no prior experience with that particular plugin but after looking it over it looks like you may have to change to way the jQuery is structured. I don’t think you can simply replace the mouseover with hoverIntent because hoverIntent controls both the in and out animations.
Instead I’m thinking that you would have to separate the two animations into individual functions and then call them from one hoverIntent event. Here’s a rough example using the plugin’s demo:
$(“#demo2 li”).hoverIntent( makeTall, makeShort )
function makeTall(){
$(#demo2 li).stop().animate({height:’150px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
});
function makeShort(){
$(#demo2 li).stop().animate({height:’50px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
});
Now I realize that this probably isn’t the copy and paste solution, but it should illustrate the direction you’ll take. Let me know if you get it worked out!
May 20th, 2009 at 3:03 AM
Wow, this is a great little menu! Unfortunately I have not been able to make it work with Wordpress. Do you know if this is possible? Any feedback would be greatly appreciated.
May 21st, 2009 at 6:00 PM
Awesome lesson!
I’m having a problem with the menu staying ‘down’ when the users click on the navigation. Can I stop the action on page refresh?
May 24th, 2009 at 8:50 PM
Is there a way to make all of this animate horizontally instead of vertically? I’m trying to pick apart the JS, but not having much luck.
Otherwise, it’s really a nice solution. Well done, Zach.
June 1st, 2009 at 12:30 AM
I think your thing is really great and have found a FANTASTIC way to have static menu items. Great tutorial! I’ve got it working pretty well.
wpdigger’s last blog post..Theme Membership Sites – Are those really useful
June 2nd, 2009 at 10:16 AM
Great menu. Did anyone work out how to rid of the hardcode height for the animated?
$(this).stop().animate({ height: ‘150px’ }, { queue: false, duration: 600, easing: ‘easeOutBounce’ })
differant dropdown menu have differant heights, is there a work around to use 100% and not 150px?
June 4th, 2009 at 4:36 AM
Thank you … this jquery-menu has me very helped.
June 9th, 2009 at 6:48 AM
hi, great, great info!!
is there a way to have it go upwards instead? i would like to do something similar to this, using jquery.
http://www.andrewsellick.com/64/fancy-sliding-tab-menu-v2
June 15th, 2009 at 10:41 PM
@Stan
This seems to be a common question, but to my knowledge the best solution would be a much different execution from the code here. I would encourage you to look into using overflow hidden and negative positioning values to mimic the block “growing”, when in reality you’d simply be having more become visible.
You can see an example of this sliding “hidden” look in another one of my jQuery tutorials. The direction is still down, but the execution is closer to what you are seeking.
To everyone else, if I’m completely having a mental lapse and there is an easier way to do what Stan is describing, please don’t hesitate to correct me.
July 12th, 2009 at 11:37 AM
Nice Tutorial, really helped me, but I am experiencing some issues. The menu loads in the opened state at first and rolls in when the mouse enters. After that it works as intended. Any guess why the menu doesn’t load in “closed” state?
Also, when I hover over the first subtext element, the menu rolls in (I am still in the area with the cursor). That shouldn’t happen. Any guesses regarding that?
.-= Boldor´s last blog ..Sensation! =-.
July 12th, 2009 at 12:05 PM
Ok, strike the first part, figured it out (didn’t notice transparent areas of an overlaying PNG that blocked part of my first menu item, thus making that crossarea “mouseleave”-zone.
Still, my second question remains. Can’t get it loaded as closed. Though I worked with the example and it’s files, where it loads closed.
.-= Boldor´s last blog ..Sensation! =-.
July 21st, 2009 at 2:13 AM
I need to know the same question already asked.
“different dropdown menu have differant heights, is there a work around to use 100% and not 150px?”
Is there a way to make unique heights if you cannot get a percentage to work?
thanks
July 21st, 2009 at 4:13 AM
I can’t get my menu to sit above my Flash element. I’ve tried the z-index in the article. Please supply a basic outline.
@Robert Depending on the type problem you are encountering, this article may be able to help out a little. It’s about using the position property of CSS to get the z-index working.
Squish the Z-Index Bug
August 6th, 2009 at 12:07 AM
Thanks for this tutorial.. the effect is pretty cool…
.-= Sumeet Chawla´s last blog ..VectorTracing HTML Mail =-.
August 12th, 2009 at 11:23 AM
I think any type of animation you can add to your site will help with visitor retention! I use to have a plain looking site that was very informative but had no real web 2.0 look to it. Now I have the same content on a web 2.0 site and my retention is through the roof!
.-= Scott Lifts´s last blog ..Air Bag Lift Table =-.
August 27th, 2009 at 4:17 PM
Hi Zach,
I am somehow new in this business and I really hope that you can help me.
I was using your wonderful menu but then it was not workin anymore because I was using another jQuery effect on the same site. The problem is……both effects are using a different syntax style but both plugins need to use the same style. I have no idea how to make them equal.
Yours is like this:
$(document).ready(function(){
//When mouse rolls over
$(“li.red”).mouseover(function(){
$(this).stop().animate({height:’100px’},{ queue:false, duration:600, easing: ‘easeOutBounce’})
});
The other style is like this:
$(function() {
$(“#test”).overlay({expose:{
color: ‘#951756′,
opacity: 0.7,
closeSpeed: 1000
}
});
})
Can you return them to me, both using the same syntax style. Hope you understand what I am talking about.
Hope to hear from you very soon.
Thanks
Hardy
Berlin/Germany
September 5th, 2009 at 6:34 AM
Hi,
I’m using this menu vertically !
I would like to know to change the animation event, to replace both mouseover and mouseout by mousedown.
So the first time I click, the menu drops down, and when I click again, the menu goes up.
Do you know if I can do this ?
Thnk you.
September 16th, 2009 at 5:28 AM
I know this has been asked a few times, but does anyone have a workaround for 100% heights?
October 2nd, 2009 at 2:31 PM
First of all, thank you Zach for this wonderful script. Haven’t used js before
I’ve found a way for 100% height.
Not directly 100% but it works fine for me.
I used the modified script from Tom Arnfeld and put more functions on it.
You must give every a different class (like: “dropper1″, “dropper2″, …). Now you can modify every height of the different class.
I hope you will understand me, my english isn’t pretty good
This is my script for “animated-menu.js”:
$(document).ready(function(){
//Fix Errors – http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
//Remove outline from links
$(“a”).click(function(){
$(this).blur();
});
//When mouse rolls over
$(“.dropper”).mouseover(function(){
$(this).stop().animate({height:’140px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
});
//When mouse is removed
$(“.dropper”).mouseout(function(){
$(this).stop().animate({height:’30px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
});
$(“.dropper2″).mouseover(function(){
$(this).stop().animate({height:’88px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
});
//When mouse is removed
$(“.dropper2″).mouseout(function(){
$(this).stop().animate({height:’30px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
});
$(“.dropper3″).mouseover(function(){
$(this).stop().animate({height:’60px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
});
//When mouse is removed
$(“.dropper3″).mouseout(function(){
$(this).stop().animate({height:’30px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
});
});
October 26th, 2009 at 8:01 PM
i got it to work on my wordpress (not live yet). the only thing is, it pushes all content down and up when it bounces. how to fix that? (tried bot ha padding and margin.
October 26th, 2009 at 11:41 PM
Nvm, i got it to work by padding the ul instead of the navigation div. To those trying to get it to work on wordpress:
in animate-menu.js, you are going to have to replace “li” (the element) with “#nav li” for example.
You will also probably ahve to add some css to make it look like it is supposed too.
for a live example of it on wordpress visit http://www.proofofbrain.com
ask if you have any questions.
November 4th, 2009 at 4:43 PM
@Zach & Stan:
Vertical upward growth can be achieved without modifying anything in the script. You will need to edit the CSS slightly though:
/* ul: add a height rule to define the container height, and set the postion to relative: */
ul {height:100px;margin:0;padding:0;position:relative;}
/*li: set the position to absolute, bottom:0 to anchor the LI elements to the bottom of the UL container */.
li{bottom:0;color:#191919;float:left;height:50px;overflow:hidden;position:absolute;text-align:center;width:100px;
/* slide the menu items into place since they will all collapse back to the left: */
.green{left:0}
.yellow{left:100px}
.red{left:200px}
.blue{left:300px}
.purple{left:400px}
November 16th, 2009 at 3:21 PM
Download link is broken. =(
November 16th, 2009 at 4:44 PM
@Argent Ounce
I just tried the link and it appears to be working fine on my end.
November 19th, 2009 at 6:00 AM
Thank you for this plugin. Btw, is there any jquery menu that has two levels of menu appear at the same time?
Yeah the download link is working
December 3rd, 2009 at 8:25 PM
I’ve altered the JS to expand the button right instead of down but is there an easier way up aligning the menu vertical instead of horizontal without just using after the element?
December 3rd, 2009 at 8:26 PM
I’ve altered the JS to expand the button right instead of down but is there an easier way up aligning the menu vertical instead of horizontal without just using after the element?
December 3rd, 2009 at 8:26 PM
I’ve altered the JS to expand the button right instead of down but is there an easier way up aligning the menu vertical instead of horizontal without just using break return after the list element?
December 24th, 2009 at 1:23 PM
How can a person update a jQuery menu from a central file (like XML for example) if the html “ul” and “li” menu structure must be pasted from page to page? How do you update the menu if you have, for example 50 pages, without having to edit page by page and not being able to use Server Side Includes?
December 30th, 2009 at 9:30 PM
thx collect it to
ajax.wespai.com
December 31st, 2009 at 6:45 AM
Awesome! and thanks…
January 4th, 2010 at 4:03 PM
Hi Zach
Just want to say thanks a lot for this. I have used your tutorial as a basis for this vertical menu I have made for a friends site and it works pretty well. The main problem I am having is I can’t get the links to work! Probably one of the easiest bits but I’m just to dumb to get it…
I used your original # link in your page html example
and updated it thus
Here it is:
http://www.mediawhore.me.uk/carwellcasswell/
If you could tell me where I’ve got it wrong I would be much obliged.
Also it doesn’t work with IE6. Is there a resource you could point me towards that could perhaps help me make it work with IE?
Thanks very much
James
January 13th, 2010 at 8:19 AM
amazing menu!!
January 20th, 2010 at 4:02 PM
You really need to give more info on how to set links! I have tried
with and without # before and after address (#)
Please let us know how to set a link! Can’t even get a hotspot on it! grrrrr
this after trying many hours
January 20th, 2010 at 4:34 PM
Oh, I figured it out now! “#” is where the full link goes excluding the # sign…but you have to have it followed by the menu name in html. I had the menu name in my jpg graphic and removed it in the html (that’s why it didn’t work, duh!)
Other things to pass on:
1) For those using tables (I know, not cool), but if you must, this menu works only under the table, not on top or everything will wiggle
2) I had a 4 item menu and made “blank” files before and after to “center” everything in my table (using a solid background color and nothing else), otherwise I would have had wide spaces between menu
my design worked best using tables, not .css
February 10th, 2010 at 11:30 PM
Can i add Sub menus while using the bounce effect? =) kindly suggest!
February 15th, 2010 at 8:11 AM
Lovely Menu, but I have 1 issue. If I have 3 or more menu items, when I scroll down past the second item the menu closes and therefore means I cannot click on the 3rd or more menu item?? Any help would be greatly appreciated.
February 17th, 2010 at 10:41 AM
Great menu Zach!
A question: it’s possible that it doesn’t work with jQuery 1.3.2? Else I wrong in something…
Many thanks!
February 18th, 2010 at 2:54 AM
I need to know how to add this menu to a wordpress please help me anyone.
February 19th, 2010 at 4:47 AM
Hi Zach,
it work fine with jQuery 1.3.2! There was another jquery library that I’ve loaded in the wrong sequence, but now all work correctly
March 9th, 2010 at 6:47 AM
Hello – love this – would really like to use it, but I’m wondering if there is a way to have the current link stay in the “down” position. I’m really new to jquery, so would really appreciate it if someone could help.
Thanks
Sophie
March 11th, 2010 at 2:24 AM
Hi guys,
Main menu text in IE not centred. Any ideas? It’s ok in chrome, safari and FF
http://buildinternet.com/live/smoothmenu/animated-menu.html
March 11th, 2010 at 5:07 PM
@Ross
I typically try a combination of “width:100%” and “display:block” when having alignment trouble in IE. Perhaps start there?
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.