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.
The Finished Product

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: Animated Menu Folder 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!

Then copy in this menu structure into the body:

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.

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.

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.

Posted Wednesday, January 21st, 2009 · Back to Top

SPONSOR

Add Comment

408 Comments 412 Mentions

  1. Eric Author Editor

    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!

    ·

    • Mykl Author Editor

      simply remove ‘easeOutBounce’ from animated-menu.js. This makes the transition slide smoothly with no bounce.

      ·

  2. Chris Cohen Author Editor

    “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.

    ·

    • Ethan Author Editor

      This is due to the fact that it is a “demo”. And any demo will contain the hash-tag character. It is placed there to distinguish the links so the user can then customize them as desired.

      ·

    • acompanhantes rio de janeiro Author Editor

      How can I make this menu work on a website in a way so the menu is on top and the dropdown actually shows up on top of the divs under the menu rather than pushing them down?

      ·

      • Kyle Author Editor

        I’d like to know the same thing

        ·

      • Jack Author Editor

        I have heard of z-index, Its something in the script what makes layers possible.. But I don’t know it works for this menu, Never tried that way.

        Google on “z-index” and Im sure you will find the answer. ;)

        ·

      • Liam Charmer Author Editor

        Sorry for being a late reply, but where your links are in a div. Set that Div to position: absolute. If you have a wrapper, then you can keep the div in a wrapper and set the margin-top to the size of the divs above.

        For instance

        Heading div has like 50px height
        then you want your links

        links div margin-top: 50px;

        then you would create a div to go behind the links div thats 50px size, then the next div can cleanly go underneath.

        ·

  3. Zach Dunn Author Editor

    @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.

    ·

  4. Jean Author Editor

    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?

    ·

  5. Liam Goodacre Author Editor

    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

    ·

  6. Paul Author Editor

    A nice effect on the animation. It would be nice perhaps to show the dropdown if JS in unavaliable, using:

    [/crayon]

    on :hover. You could then use JS to overwrite those settings and add the animation

    ·

  7. Nate Author Editor

    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;
    }

    ·

    • Russell Author Editor

      This was really helpful, thank you!

      ·

    • Dhananjay Author Editor

      Excellent Zach, this is one of coolest menus I have seen!!!

      Thanks Russel for giving details about z-index and solution for keeping main contents intact!!

      ·

  8. Zach Dunn Author Editor

    @Liam – Thanks for the tip off, I’ve gone ahead an added the additional classes in. Sorry for any confusion!

    ·

    • Mudit Singh Author Editor

      Which class Zach …..I m also having the same problem

      ·

  9. chris Author Editor

    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.

    ·

  10. Nora Author Editor

    it looks like a mootool boxes !
    I like it very nice

    ·

  11. Eric Author Editor

    Hi Zach,

    Thanks for the tip! I didn’t know there’s more to it. Kudos!

    ·

  12. MissANN Author Editor

    This is so AWESOOMME!!!!!!

    Thank you soooo much for this bud!!

    Really love it!!!

    ^0^
    ——-

    ·

  13. Robert Author Editor

    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?

    ·

    • Zach Dunn Author Editor

      @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!

      ·

  14. Robert Author Editor

    Awesome! Thanks Zack, that helped me fixed the issue perfectly!

    ·

  15. Thiago Souza Author Editor

    Really Impressive. Thank you for the explanation.

    ·

  16. Denis Author Editor

    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 :)

    ·

    • Zach Dunn Author Editor

      @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.

      ·

  17. Denis Author Editor

    Thanks a lot for explanation Zach! =)

    ·

  18. Dan Author Editor

    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

    ·

  19. Barış Author Editor

    thank you, i will use it

    ·

  20. Michael Author Editor

    I was wondering if there was a way to make the menu to pop up instead of down?

    ·

    • Hardeep Asrani Author Editor

      i think changing “false” to “true” in jquery will do your work…..

      ·

  21. Kien Author Editor

    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.

    ·

  22. Brian Author Editor

    Kien – I was wondering the same thing. It’s affecting every list on my site!

    ·

  23. Brian Author Editor

    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!

    ·

  24. Zach Dunn Author Editor

    @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!

    ·

  25. Kien Author Editor

    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.

    ·

  26. Marjan Author Editor

    In IE the first button looks retarded…

    ·

    • Löu Author Editor

      In IE everything looks retarded jackass… ;D

      ·

  27. Shawn Miller Author Editor

    I was wondering if there is a param to build the menus vertical and have the sub menus slide out horizontal!
    Awesome plugin!

    ·

  28. ein grafikbuero Author Editor

    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

    ·

  29. Tom Arnfeld Author Editor

    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!

    ·

  30. Mike Author Editor

    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?

    ·

  31. Chris Zashe Author Editor

    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!

    ·

    • Zach Dunn Author Editor

      @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!

      ·

  32. Danielle Author Editor

    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.

    ·

  33. Sarah Peck Author Editor

    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?

    ·

  34. Don Carroll Author Editor

    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.

    ·

  35. wpdigger Author Editor

    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

    ·

  36. colin Author Editor

    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?

    ·

  37. Webagentur Author Editor

    Thank you … this jquery-menu has me very helped.

    ·

  38. Stan Author Editor

    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

    ·

    • Zach Dunn Author Editor

      @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.

      ·

  39. Boldor Author Editor

    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! =-.

    ·

  40. Boldor Author Editor

    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! =-.

    ·

  41. vylan Author Editor

    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

    ·

  42. vylan Author Editor

    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

    ·

  43. Sumeet Chawla Author Editor

    Thanks for this tutorial.. the effect is pretty cool…
    .-= Sumeet Chawla´s last blog ..VectorTracing HTML Mail =-.

    ·

  44. Scott Lifts Author Editor

    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 =-.

    ·

  45. Hardy Author Editor

    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

    ·

  46. Octopussy Author Editor

    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.

    ·

  47. Steven Author Editor

    I know this has been asked a few times, but does anyone have a workaround for 100% heights?

    ·

  48. basti Author Editor

    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’})
    });

    });

    ·

  49. Scott Ringwelski Author Editor

    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.

    ·

  50. Scott Ringwelski Author Editor

    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.

    ·

    • Aditya Author Editor

      Hey, can you explain briefly as to how did you implement this is wordpress. I am sort of having troubles as to how to integrate the code and where. I use thesis btw.

      Any help would be deeply appreciated.

      ·

  51. Luke Veach Author Editor

    @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}

    ·

  52. Argent Ounce Author Editor

    Download link is broken. =(

    ·

  53. Sam Dunn Author Editor

    @Argent Ounce

    I just tried the link and it appears to be working fine on my end.

    ·

  54. iwanttobelieve Author Editor

    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 :)

    ·

  55. Luke Author Editor

    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?

    ·

  56. Luke Author Editor

    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?

    ·

  57. Luke Author Editor

    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?

    ·

    • Greg Author Editor

      how did you alter the script for expanding it to the right? If you don’t mind sharing?

      ·

    • scortrio Author Editor

      vou colocar no meu site

      ·

  58. webdev Author Editor

    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?

    ·

  59. wespai Author Editor

    thx collect it to

    ajax.wespai.com

    ·

  60. Gaurav Chaudhary Author Editor

    Awesome! and thanks…

    ·

  61. James Mullarkey Author Editor

    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

    ·

  62. עששת Author Editor

    amazing menu!!

    ·

    • הלבנת שיניים Author Editor

      on my page I have strict doctype and and the menu doesn’t work fine. how can I fix it?

      ·

  63. ljsdesign Author Editor

    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

    ·

  64. ljsdesign Author Editor

    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

    ·

  65. Abhishake Author Editor

    Can i add Sub menus while using the bounce effect? =) kindly suggest!

    ·

  66. Gary Author Editor

    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.

    ·

  67. Mauro Author Editor

    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!

    ·

  68. Louis Author Editor

    I need to know how to add this menu to a wordpress please help me anyone.

    ·

  69. Mauro Author Editor

    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

    ·

  70. Sophie Author Editor

    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

    ·

  71. Ross Naumov Author Editor

    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

    ·

    • Zach Dunn Author Editor

      @Ross

      I typically try a combination of “width:100%” and “display:block” when having alignment trouble in IE. Perhaps start there?

      ·

  72. grek Author Editor

    Hi!
    First of all: BIG thank you for the article!
    I’m playing now with it to style it.

    How to implement .active and .selected state?
    Especially .selected would be nice to point the visitors where they exactly are at the moment.

    TIA

    ·

  73. cuaryos Author Editor

    Thank for this and good work on my blog . I don’t know what my fault, my link in footer section become to expanded and crash. For couple day i’ll try to corection this problem. thank again

    ·

  74. sinde Author Editor

    it’s great! thanks!

    ·

  75. niru Author Editor

    Hey
    .green{background-image:url(‘C:\Documents and Settings\200481\Desktop\dpdwn\tab_red.jpeg’);}

    this is not showing a background image .. instead a white colur comes

    ·

  76. Mark Author Editor

    Hi i really think i could use this script :) but i have problems on putting a sub menu on each.
    for example i would like item 1 , item2 and item 3 under menu… i tried to expand the width but the whole main menu expands. Is it possible for me to only have an expanded submenu horizontally?

    ·

  77. Celio Ferreira Author Editor

    Very Good!!! Congratulation!!!!

    ·

  78. Jeremy Author Editor

    Great! Thanks for the tutorial. A very useful post, makes all of it a lot easier.

    ·

  79. peli Author Editor

    Great Tut, thanks!

    I’m new to jsQuery, that’s why I have to ask for help. I would like the content part that slides out to be wider than the nav-menu titles. For Example like the menu at the Aviary Site from the “excellent jQuery navigation” sites.

    Look here: http://aviary.com/home

    Any suggestions would be very helpful.

    ·

  80. builder Author Editor

    Great tutorial. Thanks!

    ·

  81. mikelsoft Author Editor

    just want to say.. 2 thumbs up…;p

    ·

  82. Protik Author Editor

    I liked this menu a lot, however I’m not web developer as such I just get free templates from web and build a page for personnel use. I’ve very basic knowledge of css and/or html. I’m trying to incorporate menu with my web page but text in body of page seems to be shifting (to right) with drop down menu can anyone elaborate it a little bit?
    Thanks a lot for awesome menu and for help as well :)

    ·

  83. Protik Author Editor

    Hey guys,
    I followed some tips given some point above about z-index and absolute positioning to stop moving other stuff around, however here r the results (Text in body of page right below menu was moving with menu).
    I wrote a css as below for body part — which didn’t work

    #body-content{
    width: 760px;
    margin: auto;
    background: red;
    clear: none;
    text-align: left;
    text-decoration: none;
    position: absolute center;
    z-index: -1;
    p.body-text {color: red;}
    }

    So I’ve to go and modify my html as below which works, however I wanted to keep it clean

    yole just a test being carried out.

    Does anyone have any opinion about this?
    As I said I’m not at all experience with web development but I’ll try to learn :)

    ·

  84. Protik Author Editor

    <!–
    yole just a test being carried out. Lets see wat happens if I keep on adding stuff to thisl line
    –>

    looks like this is html enabled comment so I have to add commenting around html code hope that works

    ·

  85. Protik Author Editor

    looks like it doesn’t anyway thats the content and I added style=”position:absolute; z-index: -1; color: white” to get it working

    ·

  86. Cmisnr Author Editor

    anybody know how to make the bar itself the link instead of the word.

    Thanks

    ·

  87. Cmisnr Author Editor

    anybody know how to make the bar itself the link instead of the word.

    http://www.commissionaires-salta.ca
    Thanks

    ·

  88. althoraya Author Editor

    thanks frind

    ·

  89. John Media @ server hosting Author Editor

    I really want to learn jquery as I’ved read in the other blog that it is better than flash, I’m quite thankful for the post as you’ve included some codes that would surely help us starters create a beautiful menus like that.

    ·

  90. faith Author Editor

    how can i use this in joomla? i couldn’t use the javascripts in joomla.

    ·

  91. wynajem Author Editor

    Avesome tutorial. Thanks ;)

    ·

  92. Immi Author Editor

    Brilliant drop down menu.
    Zach, I’m not too familiar with .js, but how would I change the code so that if I did a mouseover an image file, the menu would drop down?

    Thanks mate and keep up the great work; very impressive

    ·

  93. Anupam Sen Author Editor

    its cool navigation bar

    ·

  94. Anupam Sen Author Editor

    to check one more cool navigation bar check out my website

    ·

  95. ilham Author Editor

    cool navigation, i will try it

    ·

  96. Debbie Author Editor

    This is great…love the image ideas. I just need to know how I could change this so that the hover back image goes up rather than dropping down.

    Thanks!

    ·

  97. nosize Author Editor

    Hi,
    great menu. only problem is it moves all other stuff around in ie but works fine in other browsers. i call the ul in a menu class and ie keeps expanding and dercreasing this wrapper which in turn moves everthing else around.
    pls help!

    ·

  98. adnan zulkarnain Author Editor

    its great tutorial..

    thank.. i will try next time.. Good job

    ·

  99. Desigram Author Editor

    Great effects, nice animation!

    ·

  100. to look to waik Author Editor

    so great .I am a new blogger,I have learned many from your blog.Thank you share this.

    ·

  101. Rich Author Editor

    Got this to work sideways instead of down so the menu is vertical – just try changing the height attribute to width in the js. Also got it workng with jcart using jquery 1.3.2.min!

    Nice menu Zach – great stuff

    ·

  102. Web Dizajn Author Editor

    thx from Sarajevo

    ·

  103. Zafir Fazli Author Editor

    Great Job!

    ·

  104. Anthony Gibson Author Editor

    i changed the .li in the menu-ani.js and replaced with a class name ex.(.drop) and applied it to multiple absolute placed divs inside a relative placed container so i can hide the text until mouse-over an i also have the ability to center all my menu items. Thanks Alot

    ·

  105. Luke Shawver Author Editor

    This is an amazing effect. How van I make it verticle?

    ·

  106. baterie słoneczne Author Editor

    This is what I was looking for! Many many thanks.
    Great work! Thanks for guys like you – this is very very nice to have everyging in one place!

    ·

  107. Adrian Author Editor

    hello guys,

    I have a small problem. I`m using 2 jquery menus and I can not get both of them working because both of them works with list and they are overlapped.
    Any solution?

    Thank you, Adrian

    ·

  108. flyer templates Author Editor

    Thanks a bunch for the tutorial.

    Gonna try this sometime.

    ·

  109. cihip Author Editor

    How to Make a Smooth Animated Menu with jQuery post for thanx.

    ·

  110. doomie Author Editor

    I have a problem when the text is in the div that is animated, the text causes the animation to slow. Check it out.

    http://synergy.md/testqq/servicii.html

    I tried to do something but no success. Any suggestions?

    ·

  111. IT Consulting Author Editor

    Great effect , very nice indeed

    ·

  112. peter Author Editor

    doomie – I had the same problem

    heres the solution that worked for me

    http://jquery-howto.blogspot.com/2009/04/problems-with-jquery-mouseover-mouseout.html

    Good Luck

    ·

  113. Donnie Author Editor

    cool :)… hi, how can I reverse the drop down to an upward action?

    ·

  114. Eliza Dulson Author Editor

    Awesome script!!
    I was wondering how I make each dropdown stay dropped down when your on each individual page?

    ·

  115. fasalsalam Author Editor

    many, many thanks for the grate script.

    ·

  116. Mohamed hamdeen Author Editor

    can you help me for finding video tutorials about Jquery

    ·

  117. LianXiwang Author Editor

    Thank you !! You do a really good job!!!

    ·

  118. govicinity Author Editor

    Great script, altered it so it can be used as a left hand menu and the animation extends out from the left and across the page to the right, works a treat.

    ·

  119. Nicolas Author Editor

    You know i have something like this menu, the same core with a few tweaks. I`m having problems with Ie7, the animation doesn´t happen. Any ideas?

    The site:
    http://www.martrans.com.ar

    Tks for any help.

    ·

  120. Valikonen Author Editor

    Very cool collection, thanks. If you want to see menus, web site trends, galleries etc, visit http://www.1artmedia.com , you have online demo and free download. Bye!

    ·

  121. Javier Author Editor

    Quick note: I saw a number of comments about the fixed height of the dropdown menus.
    Just wanted to post that I found a solution. It will be slightly different based on the specific website but it works and the changes are not too difficult to make (I barely know javascript):

    I added the following line to the “when mouse rolls over” function:
    var dynHeight = $(this).children()[1].offsetHeight + 15;

    I also changed height: ’150px’ to
    height: dynHeight + ‘px’

    My website navigation has either a link or a link and a UL (for a submenu).
    $(this) is the which triggers the animation
    .children()[1] is the second child (the UL or nothing)
    .offsetHeight is the height of the UL (+ 15 t include the CSS margins)

    I’m sure you can use other selectors (the .children()[1]) and do it more elegantly but this works for me and likely can work for many people.

    thanks for the great script.

    Javier
    PS>The website is under construction and will remain so for a while.

    ·

    • Javier Author Editor

      ugh – correcting the post above:

      $(this) is the which triggers the animation

      should be

      $(this) is the object which triggers the animation

      ·

  122. Nicke Author Editor

    Hi!
    Big ups for the menu. Nice nice.

    But I’m having problems with the “li float:left” when I use a wrapper-div for my page. The wrapper end where the menu ends, and don’t continue around the rest of the content.
    Usally I just use a footer-div and “clear:both”, but that doesn’t work in this case. It’s kind of messing up the content below by overflow it with the menu background that appears.

    If anyone understand, I’m happy to receive help!

    ·

    • Steve Author Editor

      To set the height of each individual dropdown menu to accurately contain its content do the following:
      Put the contents of each inside a first then calculate the height of the .

      e.g.
      In HTML

      ….
      ….

      In javascript file:
      //When mouse rolls over
      $(“li”).mouseover(function(){
      var menuHt = $(this).children(“div”).height() + 20;
      $(this).stop().animate({height: menuHt+’px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
      });

      ·

      • Steve Author Editor

        Sorry, previous post lost html tags. Hopefully this show correctly:
        Add div’s to HTML:
        #
        #
        # ….
        # ….
        #
        #

        ·

      • Steve Author Editor

        OK last attempt to show change to html:

        li
        div
        ….
        ….
        /div
        /li

        ·

  123. Kleylton Ramos Author Editor

    Testei na minha máquina e funcionou perfeitamente

    ·

  124. apie studio Author Editor

    its having a similarity with mootool. but thanks for sharing, the explanation was well detailed.

    ·

  125. Ben Author Editor

    Steve has it right, confirmed on my testing.

    $(‘li’).mouseover(function(){
    // Finds out number of menu items
    numItems = $(this).children(‘p’).length – 1;

    var newHeight = (numItems * 49) + 50;

    Remember that this is the number of children of the LI element. Based on this example, even menu name (Home, About, Contact, Submit, Terms) is included in that count.

    Once you have the count, just do some math based on your per sub-menu item height + menu name height.

    ·

    • Leroy Author Editor

      I had an unknow problem when trying to implement this, until i got it debugged: as i copy/pasted the solution to Notepad++, the dash was being considered as a special character (long dash) and the process was expecting a “;” right after lenght. Erased it, replaced it with the regular dash and that was about it.

      Add: i used the menu over a picture slider, and i wanted the colors to have a little opacity, but not the text. I changed the background to the following format

      .royalk{background: rgba(68, 68, 68, 0.7);}

      in which the first 3 numbers correspond to R, G and B, and the third number is the opacity of the color only, not the text (scale from 0 to 1).

      ·

  126. saruri Author Editor

    so cool!! thx!

    ·

  127. Domino J. Author Editor

    Hi Zach,

    this menu is awesome, many many thanks for the example.
    I just want, if it is possible, to tell us how can we use this menu verticaly.

    Thanks in advice.

    ·

    • Zach Dunn Author Editor

      This menu wasn’t built to be a vertical adaptation, although you can follow many of the same principles used with easing to get the same effect. Unfortunately there’s no “change this line” approach that would make it simple.

      ·

      • Domino J. Author Editor

        I find out that you can edit the “animated-menu.js” file and there you modify heigh to width; and with some few extra changes you can make the menu go vertical.

        This is the animated-menu.js file :

        $(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
        $(“li”).mouseover(function(){
        $(this).stop().animate({width:’163px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
        });

        //When mouse is removed
        $(“li”).mouseout(function(){
        $(this).stop().animate({width:’50px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
        });

        });

        ·

  128. Diane Author Editor

    hello, congratulations for the great job. Get it to work exactly as you did, but when adapted to the code could not do my work, I do not know what I’m doing wrong, can you help me please? on my site already has a menu, I just want to add a random button in the middle of my site. so the HTML looks like this:

    Desenvolvimento de site
    Ver Portfolio

    And the CSS looks like this:

    ul#titulo1{
    position:absolute;
    margin-left: 730px;
    margin-top: 380px;
    padding:0px;
    background:#ffffff;
    }

    li.desliza1{
    width:218px;
    height:40px;
    float:left;
    color:#000000;
    font-family: georgia, verdana, arial, helvetica, sans-serif;
    font-size: 18px;
    text-align:center;
    overflow:hidden;
    }

    li.desliza1 a{
    color:#000000;
    text-decoration:none;
    }

    li.desliza1 p{
    padding:0px 5px;
    }

    .subtext{
    padding-top:15px;
    font-size: 14px;
    font-weight:bold
    }

    And JS look like this:

    $(document).ready(function(){

    //Remove outline from links
    $(“a”).click(function(){
    $(this).blur();
    });

    //When mouse rolls over
    $(“li”).mouseover(function(){
    $(this).stop().animate({height:’90px’},
    {queue:false, duration:600, easing: ‘easeOutBounce’})
    });

    //When mouse is removed
    $(“li”).mouseout(function(){
    $(this).stop().animate({height:’40px’},
    {queue:false, duration:600, easing: ‘easeOutBounce’})
    });

    });

    don’t work… Help me, please?

    ·

  129. Tim Author Editor

    I got is all working and adjusted..very nice!!

    Wandering if it’s possible to apply rounded corners to it..

    ·

  130. Don Author Editor

    Nice,
    How can I get it to hover up instead?

    ·

  131. James Author Editor

    How would I make the drop downs overlay existing content on a page/div instead of pushing it down? Thanks!

    ·

  132. Aerografix Studio Author Editor

    If you want this to animate up insted down, use negative values for height.. like this

    $(this).stop().animate({height:’-150px’});

    If you want it to expand horizontally, use width instead of height… like this

    $(this).stop().animate({width:’150px’});

    Great tutorial mate, i will implement for sure :3

    ·

  133. Diana Magers Author Editor

    Greetings, I am looking for a menu bar that is drop down but my problem is that I need for it to drop down over a continuously moving gallery. I have everything in place but for some reason the drop down menu is going behind the gallery where you can’t see your options in the menu bar. Could someone be so kind to help me with this? I am still in my learning stage. My email is info@dianamagers.com Thank you very much in advance. Diana

    ·

  134. Nathan Author Editor

    This seems to conflict with the Lightbox plugin. Anyone know why / have a solution?

    ·

  135. lukas Author Editor

    hi! great job!!!

    i just want to chanche the width of the drop down menu items, i mean the subitems, but i can´t do it, any ideas?

    thanks a lot!

    ·

  136. Shrikant Author Editor

    Hi, Really nice navigation bar but the link text is not aligned in middle in IE6, its coming near top edge. Kindly help me to sort out this issue. I tried to amend CSS but in vain.

    Overall nice work.

    ·

  137. Jon Author Editor

    Here is my issue with this nav:
    You will notice in the working example that the text in the subtext class wraps. If you have text in the subtext portion which is longer than the text in the top level of the nav then THE TOPLEVEL NAV SPACING IS OFF.

    I see enough repostings of this issue and think this should be addressed.

    Great animation but the nav spacing is jacked up. And please no responses saying “oh oh I have the same issue.”

    Just someone address it. I am working to figure this out and if I do before someone else I will be nice enough to post it clearly so that this nav can be un-jacked up.

    Jon

    ·

    • Zach Dunn Author Editor

      If you’re describing what I think you are, your best best it to define a fixed width on that particular top level navigation item. Other than that, try playing with overflow:hidden to prevent breaking sizes.

      ·

  138. Allie Author Editor

    Hey,
    Thanks so much for doing this, this is exactly what I am looking for. Unfortunately, I have tried copying it exactly (I plan to change it a it after) but I cannot get it to work! I am very new to jQuery (actually I have never used it before), and I was wondering if there was something really obvious that I could be doing wrong? I get it all set up, and the css works, but then the actual animation does not work.
    Thanks!

    ·

  139. Jimmy Author Editor

    Has anybody figured out how to have the selected drop down menu stay down when the user is on that page?

    Cant figure it out and any help would be much appreciated.

    ·

  140. IvanCito Author Editor

    i think that its a great menu …. good work …
    or in spanish:

    Buen Trabajo realmente uno de los menus mas completos que observe

    ·

  141. katrine Author Editor

    Hi Zack,

    Thanks so much for this! I needed a Jquery dropdown to replace a mootools dropdown that was clashing with a prototype library. This works great except for two issues i’m having:

    1) my page loads with the animation already ‘dropped down’…. rather than having the mouseoever initiate teh animation, it’s already open. once i mouseover it closes and then works as usual afterwards (i.e. stays closed unless the mouse goes over). Any advice on how to fix this?

    2) he content below it pushes down on animation… i’ve separated the divs into varying z-indexes but it still doesn’t seem to work… ehen the dropdown animates, all other content animates down also :-(

    thanks in advance of any help you can offer (or anyone else),

    katrina

    ·

    • katrina Author Editor

      I figured out how to get my dropdown menu to go over the content below it (and not push it down/up during animation) based on Nate’s help above (way up high near the top).

      Still trying to figure out why my drop-down menu is already open though on page load…..

      *thinking* *testing* *experimenting*

      ·

    • katrina Author Editor

      So i started from scratch and it fixed it!?!

      Dunno what was wrong but if in doubt… start again :0)

      ·

  142. Mark Author Editor

    Hi, great script, I have adapted it to my needs and it works almost perfect. One question tough. If you take an look at this screenshot http://img808.imageshack.us/img808/2364/menuru.jpg you see that the generated menu is pressing the next menu to the right. Is there an way to prevent this?

    ·

  143. rohan Author Editor

    Good work dude..

    ·

  144. Milad Author Editor

    Hello,
    how can i use this with a new version of Jquery?
    thnx

    ·

  145. Mba Author Editor

    Nice Collection…..

    ·

  146. sudhansu Author Editor

    Really it was very nice experience to learn about Menu ….
    Thanks

    ·

  147. star hotels Author Editor

    great list of tutorial…..good work…thanks for sharing

    ·

  148. mortimer Author Editor

    Great Menu but now it’s not working the Demo version

    ·

  149. Najath Author Editor

    thankx man its working……………….

    ·

  150. michell Author Editor

    hello

    ·

  151. mark Author Editor

    Flip it over!!!

    ·

  152. Arun Author Editor

    It is marvelous….

    ·

  153. Guest house Author Editor

    Its Really Amazing Menu….

    ·

  154. orchid Author Editor

    thanks for the tips…its a nice tutorial…good work

    ·

  155. Megan Author Editor

    I was really happy to find this menu about a month ago, and now that I’m wanting to try it out, the demo isn’t working! I’ve checked in Firefox, Chrome, Safari, and IE with no luck. Did you change something globally on your site that might be causing this?

    ·

    • Sam Dunn Author Editor

      Google changed the links to their jQuery library a bit ago – it broke some of our demos – try updating the link to the jQiery file!

      ·

  156. Anirudh Author Editor

    awsum effect…..searching for the same thing for a long time

    ·

  157. Patricio Bustamante Author Editor

    Uumm, not working, right now.
    :(

    ·

  158. Megan Author Editor

    I figured it would be something like that. Thanks! Got my own version working now.

    ·

  159. Paying Guest Author Editor

    This menus is really good…. Thanks for posting it

    ·

  160. john Author Editor

    dei… give the full details

    ·

  161. Wedding photographer Author Editor

    very nice work. It is really excellent rollover menu that i am searching.
    Thanx

    ·

  162. Erik Author Editor

    I do not see any animation in the demo, could anyone verify ?

    ·

    • Sam Dunn Author Editor

      You will need to update the jQuery js file – Google has removed some of the older hosted jQuery files, like the one linked to in this demo.

      ·

  163. 9ale7 Author Editor

    still the demo is not working?
    and the demo in sandbox does not loo attractive as yours??
    can you fix it ?
    thanks

    ·

  164. Zach Dunn Author Editor

    Just updated the JS stuff. Everything should be working again!

    ·

  165. Ups in chennai Author Editor

    Menu is looking great…. Thanks for sharing it

    ·

  166. Om Author Editor

    Thanks for great tutorial …really nice I like it

    ·

  167. Gas Safety Certificate Author Editor

    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?

    ·

  168. Rafal I Jarzebski Author Editor

    Well made and great help. Thank you.

    ·

  169. smiindia Author Editor

    This menus is really good…. really helped me….Thanks for posting it….

    ·

  170. smiindia Author Editor

    this is great work … its helps me a lot.. thanks ..

    ·

  171. Liam Author Editor

    Great work ! However, I would like to know how to add a ‘current’ state to the navigation bar.
    Thank you for your time.

    ·

  172. Anantha RishiKesan Author Editor

    Hi Zach,
    You are the man… thanks a lot for your wonderful menu…

    Well i am still wondering how can I get the Main Menu text midle alligned, i tried vertical align but no luck… :(

    Regards, Rishi

    ·

    • Alanf Author Editor

      Add a new class to the CSS file as follows

      .prettyheader /* use this to force neater display in title line – centred vertically*/
      {
      margin:5px;
      padding:0;
      }

      and then change the HTML file, for example:

      1 Home
      The front page
       

      ·

      • Alanf Author Editor

        Add a new class to the CSS file as follows

        .prettyheader /* use this to force neater display in title line – centred vertically*/
        {
        margin:5px;
        padding:0;
        }

        and then change the HTML file, for example:

        <p class=”prettyheader”><a href=”#”>1 Home</a></p>
        <p class=”subtext”>The front page</p>
        <p class=”subtext”> </p>

        [Reposted to show code. Used character entities in HTML content]

        ·

  173. Dermatologists Author Editor

    Menu is really Amazing… It is really useful for me… Thanks for sharing it

    ·

  174. Dinesh Kumar Shaw Author Editor

    Thanks for sharing this awesome post.

    ·

  175. Alex Author Editor

    Hello,

    Wow, amazing! Thank you so much!

    I’m a novice designer and I’m trying to incorporate this menu as a footer for a small site i’m building. Is there a way to make the animation grow upwards rather than downward?

    Thank you sooo much!

    ·

  176. Car Accessories Author Editor

    Very Nice Menu… Thanks a lot for sharing this menu

    ·

  177. Christian Author Editor

    I am very pleased with the articles or blog posts on your site. I get numerous suggestions which helped me to.

    ·

  178. Felix Author Editor

    Hi.
    Thanks for the great script.
    One questions ¿ How made show this menu in center of any window?

    Thanks.

    ·

  179. Liposuction Author Editor

    thanks for this great list. I have been looking for sites like these, I wasn’t even aware of most of these

    ·

  180. Anonymous Author Editor

    Hey there. I really like this but I have a problem. You see, I want this navigation on my forum and since forum allready have something in default as (body, ul, li so on) I need code that doesent contain those default things. Can someone show me that?

    ·

  181. Jess Author Editor

    You are awesome. :3
    So happy there are smart people on the web who are nice and write tutorials! :)

    ·

  182. Car hire chennai Author Editor

    This menu is really worth… Thanks for sharing it

    ·

  183. Martina Author Editor

    Nice menu, I’ll use it for the next project.

    ·

  184. asansör Author Editor

    thank you firiend.ı like it….

    ·

  185. Somera Author Editor

    Hey i want the answere for how to create a nested columns at which actually when u move mouse over the rows the color changes so i can’t get that how to create it so can you please help
    Regards Somera

    ·

  186. holen Author Editor

    i like this!nice menu…

    ·

  187. Y8 games Author Editor

    I like too… thanks for sharing

    ·

  188. oil coolers Author Editor

    nice post thanks for sharing it

    ·

  189. Plastic bags manufacturer Author Editor

    thanks for the great menus….. really its a great post…

    ·

  190. John Author Editor

    how to do you make this program go initially up instead of down?

    ·

  191. Paulo Author Editor

    Hi Zach! “Simply”, beaultiful and functional, a great menu. I’ve liked at the fist look.

    Congratulations and thank you for the explanation!

    ·

  192. Posizionamento siti Author Editor

    Really interesting tut! very good!

    ·

  193. Thomas Author Editor

    To the author of this article.

    Thank you so much! I know this is made by you etc. but is it possible for me to use your “idea” on my websites? I really love the bouncing effect! I though you had to make them in Flash or something.

    ·

  194. Khurram Author Editor

    I love this navigation style, but it’s not working the way I want it to. Every time I hover over the link the animation expands but it moves everything else on the page down with the animation as well. I figure it has something to do with the way I have the css positioning. Any tips?

    ·

  195. BMSMITH Author Editor

    I like it alot. Only one problem. When I hover over it it moves the whole page with it.. Is there a way to make it float?

    ·

  196. طراحی سایت و سئو Author Editor

    i like it tnx

    ·

  197. kivovo Author Editor

    Just couldn’t leave without saying thank you.

    ·

  198. Sasha Author Editor

    Thank you very much iv been killing myself im a begginer at jquery and iv made my menu i made it slide up but couldnt slide it down! why didnt it work i set .hover as mouse over and .blur as mouse out and it should have worked?

    ·

  199. sourabh Author Editor

    yuppp!!!!great animation

    ·

  200. rizwan Author Editor

    i liked this menu but i have applied on my website but problem is that when i use another jquery slide on page its stop working plz give me solution .thanks

    ·

  201. mark nason escalante Author Editor

    I’ve found out a thing new on many different information sites day-to-day. It’s always stimulative to see content of other copy writers and learn somewhat a thing from their site. Thanks for giving.

    ·

  202. Lucas Author Editor

    Hi, friends,

    I have a question… in Chrome and IE, the scripts run perfectly, but not in Firefox.
    What happens? How can I solve this?

    Thanks.

    ·

  203. Michael Author Editor

    Hello there.

    I really like the script and have been playing with it for quite a while. Still, I can’t work around one problem: in order to fit the links, my menu has to be wider than the -item above it. I know that the overflow=”hidden” attribute is a must, otherwise it won’t be animated, but isn’t there a workaround? I’ve tried different div-containers, :hovers, I even tampered with the jquery-file, but nothing works. Anybody any suggestions?

    Thanks, Michael.

    ·

    • Michael Author Editor

      For any one interested, I bypassed the problem by not using the animate function but the slideDown/slideUp functions:

      $(document).ready(function(){

      $(‘#hover’).hover(function () {

      $(‘#dropdown’).stop(true, true).slideDown(‘slow’, ‘easeOutBounce’);

      }, function () {
      $(‘#dropdown’).stop(true, true).slideUp(‘slow’, ‘easeOutBounce’);

      });

      });

      ·

      • Rasta Author Editor

        Anyway you can elaborate a little more on this? I want to have my dropdown menu’s wider than the button. I’m new to all of this but can understand most lingo. If I replace your code into my .js file, I don’t get any drop downs at all. What else would I need to modify?

        thanks!

        ·

  204. fabir Author Editor

    well done! great thanks

    ·

  205. Alex Author Editor

    Hi. I can’t get this to work in wordpress!!! i got it working in a normal html based website but i’ve recently moved over to wp for its cms capabilities but i can’t get it work.

    ·

  206. Cliff Author Editor

    How do you get the tabs to stay open when you click the link, To indicate what page your on?

    ·

  207. ritesh Author Editor

    firstly great work….!!thanx!!
    i was trying to change the width and height of the menus.i changed it
    li{
    width:150px;
    height:25px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden; }

    but when executed i get the menu but i get the name in half.for eg : for the menu “home” the text home is displayed in half.i tried to play with the properties but am not able to get the complete text.con anyone suggest anything?

    ·

  208. Kaye Author Editor

    This is great stuff. Thanks!

    ·

  209. Rob Author Editor

    Hi there,

    GREAT little tool, but I wondered – on my site it’s punching out stacks of

    “��� ��� ���”

    In and around the drop downs… is there a way to resolve this?

    ·

  210. Rob Author Editor

    Hooooo, sorry – I figured it out. Lol, looking at the source there was a bunch of dodgey whitespace characters. Thanks though! GREAT little kit!

    ·

  211. Ardell Nydick Author Editor

    Fabulous, what a blog it is! This website presents valuable information to us, keep it up.Nike Air

    ·

  212. Camsoptopsy Author Editor

    sims 2 скачать бесплатно игру [url=http://medvedsoft.info/index.php?newsid=30562]ключ acdsee pro 5[/url]

    ·

  213. Jai Author Editor

    Is there anybody know from where I can get this navigation bar? http://www.iniyant.com/

    ·

  214. Detaljer & Bakgrund associerad med Vintage H盲ngen Author Editor

    This is the right weblog for anyone who desires to search out out about this topic. You realize a lot its almost hard to argue with you (not that I really would want…HaHa). You positively put a new spin on a topic thats been written about for years. Great stuff, just nice!

    ·

  215. Graphic Designer Author Editor

    Amazing ! Thanks, I think I’m gonna try this for next site

    ·

  216. Saul Duplesis Author Editor

    Hello, after reading this amazing piece of writing i am too delighted to share my experience here with colleagues.Armani Occhiali

    ·

  217. catynopzlex Author Editor

    von’s pharmacy decatur las vegas [url=http://www.formspring.me/Acompliabuy/q/304943257542992414#505] acomplia 40 mg generic [/url] medicine rook gravels
    arthritis medicine plavic [url=http://www.formspring.me/Acompliabuy/q/304943222730269140#684] acomplia in canada [/url] walgreen’s pharmacy caton farm rd
    kroger pharmacy hwy 100 [url=http://www.formspring.me/Acompliabuy/q/304943193596633506#365] acomplia in us [/url] names of medicines
    center for traditional chinese medicine [url=http://www.formspring.me/Acompliabuy/q/304943164244890761#411] medicament purchase acomplia [/url] 1 click pharmacy
    oklahoma state pharmacy license [url=http://www.formspring.me/Acompliabuy/q/304943125472744516#455] buy acomplia mexico pharmacy [/url] oakdell pharmacy in san antonio tx
    nuclear medicine canada [url=http://www.formspring.me/Acompliabuy/q/304943087031944177#189] acomplia news rimonabant [/url] shannon l b miller pharm d
    cutchogue internal medicine pllc ny [url=http://www.formspring.me/Acompliabuy/q/304943041037206437#091] acomplia buy no prescription rimonabant [/url] cold antiviral medicine
    maintainance medicine [url=http://www.formspring.me/Acompliabuy/q/304942988386115619#926] acomplia no rx [/url] four dollar list pharmacy
    herbal medicine in treating disease [url=http://www.formspring.me/Acompliabuy/q/304942531462839507#161] acomplia on line [/url] medicine rosena
    free orthopedic medicine [url=http://www.formspring.me/Acompliabuy#078] [/url] pharmacy best kept secret
    sullivan school of pharmacy <a href=http://www.formspring.me/Acompliabuy/q/304943257542992414#863] acomplia side effects generic moxies medicine hat
    greenville internal medicine <a href=http://www.formspring.me/Acompliabuy/q/304943222730269140#176] acomplia in canada blood pressure medicines cause tremors
    alternative american institute medicine <a href=http://www.formspring.me/Acompliabuy/q/304943193596633506#710] spanish practices in medicine
    pharmacy charges for contrast <a href=http://www.formspring.me/Acompliabuy/q/304943164244890761#853] link washington universtiy school of medicine
    lowrys family medicine richburg sc <a href=http://www.formspring.me/Acompliabuy/q/304943125472744516#910] link admission into a collage of pharmacy
    airborne flu medicine <a href=http://www.formspring.me/Acompliabuy/q/304943087031944177#179] acomplia today latest news super d pharmacy
    pharmacy benefit administrators inc <a href=http://www.formspring.me/Acompliabuy/q/304943041037206437#839] acomplia bargain no prescription medicine adalat cc
    national pharmacy ratings <a href=http://www.formspring.me/Acompliabuy/q/304942988386115619#119] acomplia no rx needed lewis physical medicine
    pharmacy students silence <a href=http://www.formspring.me/Acompliabuy/q/304942531462839507#795] link cracked heel medicine
    high school veterinary medicine <a href=http://www.formspring.me/Acompliabuy#745] link deer medicine rocks mt

    ·

  218. kifyvoino Author Editor

    [url=http://www.dnscook.net/hostip.php/adexim.net.pl]Przeprowadzki warszawa[/url]
    [url=http://www.sitetrail.com/adexim.net.pl]Przeprowadzki miedzynarodowe[/url]
    [url=http://www.tooto.com/discover/%3Awww.adexim.net.pl]Przeprowadzki[/url]
    [url=http://beisnica.com/adexim.net.pl]Przeprowadzki mieszkan[/url]
    [url=http://showsiteinfo.appspot.com/sites/adexim.net.pl]Przeprowadzki mieszkan[/url]

    ·

  219. cars games Author Editor

    This is one of the most incredible blogs Ive read in a very long time. The amount of information in here is stunning, like you practically wrote the book on the subject. Your blog is great for anyone who wants to understand this subject more. Great stuff; please keep it up!

    ·

  220. mayzin Author Editor

    so perfect tutorial for smooth animated menu with jquery!

    ·

  221. ikindpqrows Author Editor

    allergic reactions to ppi medicines [url=http://www.youtube.com/watch?v=noER1LrpHgY#139] facts on smoking by cigarettes in for girls b [/url] influence complementary alternative medicine
    homeopathic medicine dr forest [url=http://www.youtube.com/watch?v=fcEyJwHpVI8#573] golden virginia rolling tobacco b nutrition b [/url] geriatric medicine boston
    emergency medicine free resources [url=http://www.youtube.com/watch?v=oSN_mDO9I9E#633] hoyo de monterrey cigars honduras bodied [/url] behavioral medicine in kennesaw ga
    advanced health assessment clinical practice medicine [url=http://www.youtube.com/watch?v=uveQEYkMX0U#188] humidor discount co uk [/url] assyrian and babylon medicine
    rockwell pharmacy [url=http://www.youtube.com/watch?v=VLHRzsm093Q#616] link [/url] wv board of pharmacy
    technician training programs pharmacy tech [url=http://www.youtube.com/watch?v=S8Oc-TROQc4#203] list of deadly chemicals in cigarettes [/url] cinnamon medicine chests
    watkins medicine bottles [url=http://www.youtube.com/watch?v=sAkzSzStgSI#426] link [/url] high blood pressure medicine coughing
    pharmacy degree and scope [url=http://www.youtube.com/watch?v=GTbg3tiPJCs#569] macbeth by cigarettes in rio b [/url] love medicine louise erdrich
    anxiety medicine mexico adix [url=http://www.youtube.com/watch?v=1KpKOVnOe6o#410] marlboro cigarettes coupon [/url] schools alternative natural medicine
    medicines to help dementia [url=http://www.youtube.com/watch?v=eKCQw1S_7cA#111] montecristo 2 torpedob [/url] pharm tank
    newcastle university medicine interviews <a href=http://www.youtube.com/watch?v=noER1LrpHgY#773] girls smoking cigarettes hotfile safety of online pharmacies in canada
    pharmacy demand index <a href=http://www.youtube.com/watch?v=fcEyJwHpVI8#725] golden virginia rolling tobacco sales royal hills pharmacy
    chinese medicine for goiter removal <a href=http://www.youtube.com/watch?v=oSN_mDO9I9E#084] hoyo de monterrey churchill cigars osco pharmacy cheyenne wyoming
    pharmacy signs <a href=http://www.youtube.com/watch?v=uveQEYkMX0U#222] humidor discount walkthrough veterans clinic and pharmacy knoxville tennessee
    toledo academy of pharmacy <a href=http://www.youtube.com/watch?v=VLHRzsm093Q#942] link medicine break throughs in 2007
    patent medicine companies <a href=http://www.youtube.com/watch?v=S8Oc-TROQc4#375] list of chemicals in bi cigarettes ibm wiki b resume format pharmacy intern
    cvs pharmacy clear lake tx <a href=http://www.youtube.com/watch?v=sAkzSzStgSI#469] lucky strikes cigarettes for sale per carton lack of evidence for alternative medicine
    derek chez medicine hat <a href=http://www.youtube.com/watch?v=GTbg3tiPJCs#582] macbeth cigarettes review pharmacies fredricksburg va
    cann of medicine <a href=http://www.youtube.com/watch?v=1KpKOVnOe6o#954] discount cigarettes marlboro bank of america free shipping b warrens pharmacy ny
    kiwi pharmacy <a href=http://www.youtube.com/watch?v=eKCQw1S_7cA#222] montecristo white 2 ensign pharmacy union memorial hospital md

    ·

  222. Mizuki Author Editor

    Having a hard time using it on wordpress. the css of the menu file overrides my whole site’s css.

    ·

  223. phonecluster Author Editor

    i just follow the guides above step by step, finally works perfectly, great tutorial, if anyone wish to change some effect, make sure you know and understand some JQuery rules and syntax, or it will not run after the changes.

    ·

  224. bip Author Editor

    Very nice menu. Thanks for sharing

    ·

  225. Kyle Author Editor

    Can someone please tell me how to center this menu!!!

    I have tried everything I know of, and simply cannot get it to center.

    ·

  226. Shingo Author Editor

    Thanks for sharing this great tut. I love the outcome, clean and robust. For those who are interested, check out my tutorial on creating animated icons with jQuery http://www.shingokko.com/blog-entry/animated-icon-menu.html.

    ·

  227. Ben Author Editor

    I like your menu! I hope you don’t mind if I use something similar in my latest project!

    ·

  228. lta Author Editor

    tnx a lot

    ·

  229. catytopkzex Author Editor

    powerpak pharmacy education [url=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/children-azithromycin.html#143] azithromycin tablets for children [/url] medicine ball 15
    internal medicine dupage county [url=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/chlamydia-and-azithromycin.html#574] azithromycin cure chlamydia and clamidia [/url] petrochemical medicine
    marijuana as medicine [url=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/chlamydia-azithromycin.html#765] azithromycin chlamydia used to treat [/url] health concerns chines medicine
    knotty pine medicine cabinet [url=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/chlamydia-zithromax.html#949] 1g zithromax chlamydia [/url] online pharmacy tech class
    modafinil the pharmacy express [url=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/co-azithromycin.html#048] co-azithromycin chlamydia [/url] blessed pharmacy new orleans
    cvs pharmacy online application [url=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/cost-azithromycin.html#170] azithromycin 5 day dose pack cost oral [/url] medicine hat mobile home for sale
    bronze or pewter framed medicine cabinets [url=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/discount-azithromycin.html#582] discount azithromycin [/url] crime and medicine
    good’s pharmacy in tyler tx [url=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/discount-zithromax.html#967] discount generic zithromax [/url] bariatric medicine michigan
    critical care pharmacy residency [url=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/does-azithromycin-work.html#178] how long does azithromycin work [/url] ir profile pharmacy
    folk medicine of louisiana [url=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/dosage-azithromycin.html#079] dosage of azithromycin for asthma [/url] dg medicine and vitamins
    adderall pharmacy without perscription <a href=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/children-azithromycin.html#772] azithromycin children administration meijer pharmacy hill rd
    bi medicine <a href=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/chlamydia-and-azithromycin.html#255] azithromycin and chlamydia medication medicine equal to levoquin
    peninsula internal medicine <a href=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/chlamydia-azithromycin.html#847] azithromycin chlamydia penicillin hilander pharmacy
    missouri pharmacy association <a href=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/chlamydia-zithromax.html#090] link pharmacy drive up audio system
    blood pressure medicine and mood swings <a href=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/co-azithromycin.html#312] co-azithromycin chlamydia dr takacs uab school of medicine
    creole alternative medicine <a href=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/cost-azithromycin.html#153] and doxycycline cost azithromycin strategy national institute of medicine
    european journal nucl medicine mol <a href=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/discount-azithromycin.html#600] azithromycin dosage forms with discount side effects master degrees in alternative medicine
    ew james pharmacy union city tn <a href=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/discount-zithromax.html#904] antibiotics zithromax discount acne alternative medicine
    american standard medicine minnesota <a href=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/does-azithromycin-work.html#615] does azithromycin work for urinary tract infection legand of the medicine wheel
    eye dilated allergy medicine <a href=http://zithromax-antibiotic.squarespace.com/blog/2012/5/10/dosage-azithromycin.html#830] dosage of azithromycin for hpv kingwood pharmacy chattanooga

    ·

  230. Camila Author Editor

    Can it be a fixed menu ?
    I did try change the position but it stopped working .

    Also , Is there anyway that I can change the animation proprieties so I dont get the content moving when hover the menu ?
    I want it to overlay instead …

    thanks

    ·

    • Rob Author Editor

      i take it what your trying to ask about it being a fixed menu is that you would like to place it some where else on your page, the answer is yes, just change the css, the other thing you where asking about whether you can change it from running when the mouse hovers over you can use “onclick” rather then “mouseover” i would keep “mouseout” to close it though cause you dont want people clicking to close there menu bars. hope that helps

      ·

  231. Rob Author Editor

    i have used this in the last two site i have built, very cool and it packs the wow factor with easing built in! good job

    ·

  232. Paul curran Author Editor

    Is it possible to have the active li stay in the rollover position? Thanks in advance.

    ·

  233. Paul Curran Author Editor

    Hi everyone, is there a way to allow the active link to stay rolled out? i cant find a solution, thanks.

    ·

  234. dani Author Editor

    How i can make the subtext menu higher?
    I have more point in the menu?

    ·

  235. dani Author Editor

    It dont work in IE?

    ·

  236. Jamie Author Editor

    Great menu, but is there a way to only have the li’s that contain subtext bounce?

    So for example, my home li doesn’t have any subcontent, but my reports one does, so that is the one I would want to bounce. The others just stay still

    ·

  237. Devon Fortunato Author Editor

    Great tremendous issues here. I am very glad to look your post. Thanks a lot and i am taking a look ahead to touch you. Will you kindly drop me a mail?

    ·

  238. salz Author Editor

    If the content is being pushed down instead of the menu being on top of everything else here is how to fix.

    In the animated-menu.css, change the ul to

    ul
    {
    margin:0;
    padding:0;
    position: absolute;
    }

    There ya go. For more info, click this! http://jsfiddle.net/marcuswhybrow/E8twW/1/

    ·

  239. salz Author Editor

    Also, to put the image, do the following. In photoshop, make 5 images that are each green red blue yellow orange respectively and are each 100pixles width and 150pixles in height. Put a small drawing or whatever you want on the bottom of each image. Save all 5 in the images folder. Then in the animated-menu.css file, make the following changes:

    .green{background:#6AA63B; url(‘images/green-item-bg.jpg’) top left no-repeat;}
    .yellow{background:#FBC700; url(‘images/yellow-item-bg.jpg’) top left no-repeat;}
    .red{background:#D52100; url(‘images/red-item-bg.jpg’) top left no-repeat;}
    .purple{background:#5122B4; url(‘images/purple-item-bg.jpg’) top left no-repeat;}
    .blue{background:#0292C0; url(‘images/blue-item-bg.jpg’) top left no-repeat;}

    Should work fine.

    ·

    • Simo Author Editor

      Excellent tutorial, works great, however I have problem with adding pictures.

      I tried this code as suggested, but it doesn’t work for me.

      .green{background:#6AA63B; url(‘images/green-item-bg.jpg’) top left no-repeat;}
      .yellow{background:#FBC700; url(‘images/yellow-item-bg.jpg’) top left no-repeat;}
      .red{background:#D52100; url(‘images/red-item-bg.jpg’) top left no-repeat;}
      .purple{background:#5122B4; url(‘images/purple-item-bg.jpg’) top left no-repeat;}
      .blue{background:#0292C0; url(‘images/blue-item-bg.jpg’) top left no-repeat;}

      I created five pictures as written above and placed them in /images directory. I tried using/replacing this lines in.css but it doesn’t work. And yes, I used exact names (green-item-bg.jpg, …) as written above.

      Can someone help, please?

      ·

  240. Rasta Author Editor

    Great looking menu!

    I’m new to html, css, and javascript and was wondering what I would need to do to have a wider drop down menu WITHOUT expanding the width of the button.

    ·

  241. Danielle Author Editor

    I’m using this animated menu, but I wanted to use a hover effect. Everything works except I want the item to stay highlighted until it’s done with the animation. It was working for a while, but it suddenly stopped. Is there a solution to this?

    ·

    • Kayleen Author Editor

      How did you apply the hover effect? I am trying to figure out how to do that!

      ·

  242. Flifttababuct Author Editor

    Ben 100 persone | sono sempre stati durante avere un terremoto il fatto che molto sepolto più di 20 case in avere il Lunedi nord dell’Afghanistan, hanno detto i funzionari. [url=http://carreraocchiali.livejournal.com]longchamp roma[/url]
    I soccorritori hanno marca finora tirato due corpi delle donne lungo il macerie in avere provincia di Baghlan, ha detto il governatore provinciale, Abdul Majid. Il principale Nazioni Unite hanno confermato una morte altri mentre detto case sono state distrutte in cinque il tuo cinque quartieri. [url=http://blog.libero.it/longchampxw]longchamp bologna[/url]
    Essi Le aziende esattamente molte case furono sepolti solo per specifiche by – dopo residenti nell’area, che ha detto tra il 25 e il inoltre in a specifica frana.
    http://blog.libero.it/longchampxw

    ·

  243. thiniachigo Author Editor

    As Europe slouches toward a brand new monetary union in which it aims to successfully force euro area governments returning to cede control over their banks in addition to budgets, a meaningful crucial question remains unanswered: ask yourself how to positively persuade investors in which to shop for, and also hold meant for those long call, some of the bonds most typically associated with at-risk economies really like Italy plus Spain. [url=http://twitter.com/AronGilham ]longchamp uk[/url]
    Still, Friday’s euphoria notwithstanding, economists and therefore market participants remain doubtful just that its bond market fears is going to be permanently assuaged until some of the European Central Bank or credit union intervenes equipped with each of our force in addition to conviction shown when its peers from the specific North American moreover Britain. [url=http://twitter.com/EmoryLascala]longchamp bags[/url]
    Nufactured Grauwe proposes instead, whom this particular European Central Depend announce that experts claim your idea will be an aggressive buyer relating to Spanish aka Italian bonds until generally spread – or even a each difference between most of the yields on these bonds also benchmark German bonds – reaches each certain level, say 300 basis points, compared suffering from the main recent level amongst 500 basis points and as well , above.
    http://longchampsale.urbanblog.dk/

    ·

  244. DRN Author Editor

    Is there anyway to make it animate expanding upwards rather than the typical downwards?

    Thanks in advance!!

    ·

  245. Mark Author Editor

    Hi,
    I have a problem that two the menu,but I want one of the menu to work,other menu not work.
    What do I do ?

    ·

  246. Mark Author Editor

    i got the answer. thanks.

    ·

  247. olivier Author Editor

    Great stuff, Magic !

    however I meet a problem and it’s seem to interfere with other

    that I have for example where I have slideshow with other script !

    seem to have conflict with class

    i put my menu inside a div tag call navbar and rename animated-menu CSS with this Div a root reference but still con flit and my slideshow get animation from the javascript menu!

    it’s fun but not what I want -

    Any idea t help a little frenchy

    oli
    cheers

    ·

  248. Suku Author Editor

    Nice piece of article. Thanks for sharing this. I want to use this in my sites. Will it be legal?

    ·

  249. Kayleen Author Editor

    Is it possible to customize the sub menus to varying heights depending on the number of sublinks? Also, to fix the main links so that they don’t drop down when moused over if there aren’t any sublinks? Any help is much appreciated! thanks!

    ·

  250. mikhaell Author Editor

    Does anyone have an idea, how to reverse the direction of the menu?
    I would like to grow up over the menu bar…

    Any tip?

    ·

  251. Kayleen Author Editor

    Okay, I figured out the answer to my question above. Now I am wondering how to apply a 1. hover image swap and 2. keep the parent link active when the submenu is displayed. I am just learning jquery, not sure if I would make the change here or in the CSS file? Please help! THANKS!

    ·

  252. Fabir Author Editor

    I was looking to find answers on this
    Thanks

    ·

  253. Marty Author Editor

    Hello all,

    Thanks for the menu. It is great. One question. In Chrome everthing works fine but when I test it in IE (version 9) my content below is also moving down like the menu. The strange thing is that it only happens on the last link. When I remove the last link it happens still with the last link then.

    Thanks

    ·

  254. sercan Author Editor

    Thanks, I liked too much.. I’ll use for my web site

    ·

  255. Nick Author Editor

    Thanks for the code :)

    How can I make this menu work on a website in a way so the menu is on top and the dropdown actually shows up on top of the divs under the menu rather than pushing them down?

    ·

  256. Simo Author Editor

    Excellent tutorial, works great, however I have problem with adding pictures.

    I tried this code as suggested, but it doesn’t work for me.

    .green{background:#6AA63B; url(‘images/green-item-bg.jpg’) top left no-repeat;}
    .yellow{background:#FBC700; url(‘images/yellow-item-bg.jpg’) top left no-repeat;}
    .red{background:#D52100; url(‘images/red-item-bg.jpg’) top left no-repeat;}
    .purple{background:#5122B4; url(‘images/purple-item-bg.jpg’) top left no-repeat;}
    .blue{background:#0292C0; url(‘images/blue-item-bg.jpg’) top left no-repeat;}

    I created five pictures as written above and placed them in /images directory. I tried using/replacing this lines in.css but it doesn’t work. And yes, I used exact names (green-item-bg.jpg, …) as written above.

    Can someone help, please?

    ·

  257. acompanhantes brasilia Author Editor

    You are great and thank for you articles

    ·

  258. asansonculersitesi Author Editor

    although we use ext js most of the time, Jquery is much more lightweight.
    Thanks for the sharing.

    ·

  259. Diana Author Editor

    thk so much….

    ·

  260. Cricketers Author Editor

    Thanks for posting. Great blog you have here, I am following your blog, please keep posting

    ·

  261. Cuisine algerienne Author Editor

    Thank you for this tuto

    ·

  262. Daniel Torres Author Editor

    I was looking to find answers on this. Nice piece of article. Thanks for sharing this. I want to use this in my sites
    Thanks.

    ·

  263. Gerrit Author Editor

    How can i get the active state to work?

    ·

  264. przewoz mebli Author Editor

    Hi there, I enjoy reading all of your article post.

    I wanted to write a little comment to support you.

    ·

  265. طراحی سایت Author Editor

    GRAET TANX ADMIN

    ·

  266. Eduardo Author Editor

    Super cool… :)

    ·

  267. Kevin Author Editor

    Eric, how do you center such a menu? Its default is left aligned… The script doesn’t seem to respond to such alignments…

    ·

  268. تور استانبول Author Editor

    strongly…

    ·

  269. seven Author Editor

    hello,Thanks for the code~

    ·

  270. Tibet travel Author Editor

    I like the helpful information you provide in your
    articles. I’ll bookmark your blog and check again here regularly. I am quite sure I’ll learn many new stuff
    right here! Good luck for the next!

    ·

  271. stephen Author Editor

    Thank you! But I think this doesn’t work with jquery-1.8.3.min

    ·

  272. pompa Author Editor

    thank for you code.

    ·

  273. david944 Author Editor

    It is nice post and i found some interesting information on this blog. Keep it upAnimated intro

    ·

  274. سئو Author Editor

    Thank you .

    ·

  275. Bang Kamplenk Author Editor

    Keren banget masbro…
    Tapi saya masih bingung untuk praktekinnya

    riefsaz.blogspot.com

    ·

  276. Bhuwan Roka Author Editor

    Nice Article. Thank you so much for it. Keep it up & hope to get more & more tips regarding jquery functions.

    ·

  277. acompanhantes brasilia Author Editor

    You do a really good job!!!
    Thank you !!

    ·

  278. chris Author Editor

    Just one problem I have. I’ve placed text links in the drop down area but when I scroll over each link, the animation keeps starting and stopping every time I scroll over another link. Any ideas how to fix that?

    ·

  279. Ryan Author Editor

    How do I make the subtext mouse over and clickable? What code would I use?

    ·

  280. prefabrik Author Editor

    Thank you…

    ·

  281. Özer Author Editor

    Hey guys,

    I have a huge problem and cant get it fixed. I’m new to all this. I used your bar, however, flexslider gets corrupted by the script. You can see it here: http://www.oesah.de/webs/exp the picutres in the slider show the same effect as the navigation bar. I want the JS only to apply to the navigation bar, but apparently all “li” are on JS.

    Can you please help me? Been trying to find a solution for 3 days now.

    ·

  282. Özer Author Editor

    Nevermind, I found the solution in these comments. Thank you! Great work!

    ·

  283. mona Author Editor

    please send me this menu demo on my emailid mona.laxkar@yahoo.com

    ·

  284. Carl Author Editor

    I’m new to this…I pasted the code into the appropriate files and opened the html file in foxfire. The menu is displayed and when the pointer is over the menu items the pointer turns into a hand but the sub items don’t display and there isn’t any animation.

    Anyone have any suggestions that might help.

    Thanks

    ·

  285. André Author Editor

    Thank you so much. Love it!

    ·

  286. malak Author Editor

    thanks a bunch! you saved me lot of time.

    ·

  287. Memish Author Editor

    Does anyone have working code which allows you to put some text or an image below the menu without it getting pushed out of the way when you use the menu????

    I’ve tried using the z-index to no avail. I think I may be putting the z-index in the wrong tags in my css file. I’ve tried all different combinations.

    I appreciate any suggestions.
    Thanks,
    M

    ·

  288. Humberto Author Editor

    Excelent, well explained and for me works perfectly.
    Brilliant Zach…Thanks

    ·

  289. jako Author Editor

    nice text and expl. but menu itself looks terrible and works derrible as well. Everything is builded propely but effects dont match, using it feels silly

    ·

  290. مهاجرت استرالیا Author Editor

    best website
    tnx admin

    ·

  291. Mail Author Editor

    There are different version of JS codes for drop down menu. Your presentation is simple and clarity on the code part. Being simple code and light weight, the page loading is faster comparing to others.

    I also prepared another drop down menu (with hover effect):
    http://www.freemenu.info/2013/05/js-menu.html

    ·

  292. http://www.auto-schrauber.de/ Author Editor

    My spouse and I absolutely love your blog and find
    many of your post’s to be exactly I’m looking for.
    Would you offer guest writers to write content for yourself?
    I wouldn’t mind composing a post or elaborating on a number of the subjects you write regarding here. Again, awesome web log!

    ·

  293. Jamesbouu Author Editor

    Anyway to make the menu stays, after removing the mouse, when you click it ?

    ·

  294. John Author Editor

    Great script thanks. My question is how to get it to work with other plugins on the same page .Running jquery 1.7.2.min.js and it doesn’t seem to work. I have tried the following but doesn’t seem to help. Anyone have any ideas?

    $.noConflict();
    jQuery(document).ready(function($) {
    // Code that uses jQuery’s $ can follow here.
    });
    // Code that uses other library’s $ can follow here.

    ·

  295. John Author Editor

    How do I add more than three items on one menu

    ·

  296. John Author Editor

    I am having trouble when I add more than two sub-items, is there a way to fix this without changing the size of everything else

    ·

  297. John Author Editor

    I am having trouble adding more the two sub-items on one item, is there a way to fix this without changing everything else.

    ·

  298. Arifa Author Editor

    Excellent workkkkk….. superbbbbb ,,, U rock zach :)

    ·

  299. Muadh Author Editor

    for a sub menu i think u have to specify the height of the based on the number of sub s you want to add

    ·

  300. Muadh Author Editor

    for a sub menu i think u have to specify the height of the ul based on the number of sub li s you want to add

    ·

  301. Muadh Author Editor

    i created a code which will work with a sub-menu which automatically detects the number of sub-elements and sets the width of every sub-menu
    but i don’t know if i can paste it here..

    ·

  302. sexy chicks Author Editor

    Magnificent website. Lots of useful info here. I am sending it to several friends ans
    additionally sharing in delicious. And obviously,
    thanks to your effort!

    ·

  303. rap beats free Author Editor

    Hey there would you mind letting me know which webhost you’re utilizing? I’ve loaded your blog in
    3 completely different browsers and I must say this
    blog loads a lot quicker then most. Can you suggest a good hosting provider at a
    honest price? Thank you, I appreciate it!

    My site: rap beats free

    ·

  304. tvbmediahub Author Editor

    Simple yet working scripts, I’ve tried it and it’s running very smooth and great, thank you for sharing this!

    ·

  305. webpage Author Editor

    Hi, I do believe this is a great site. I stumbledupon
    it ;) I’m going to return once again since I saved as a favorite it. Money and freedom is the greatest way to change, may you be rich and continue to help other people.

    ·

  306. online form generator Author Editor

    Now, there are hundreds of programs available ranging from free to
    hundreds of dollars, including everything from a bare bones setup to an all inclusive image editing suit.
    ) and installation used are correct for your situation
    and the location of your wine cellar. You can make corrections directly instead of having to search mistake through
    the code, if something does not seem OK for you.

    ·

  307. online form builder Author Editor

    However, there are several online interfaces available where one needs to click on different types of
    options to send HTML code in email or to generate HTML code.
    It’s easy to use a fake IP address on i – Phone and i – Pad, but you need to know what you need the fake IP for. If a picture is worth a thousand words then you can just image how much you will absorb by browsing this site.

    ·

  308. free itunes download codes Author Editor

    Wow! Finally I got a website from where I be
    capable of in fact take useful data regarding my study and knowledge.

    ·

  309. online form builder Author Editor

    Horizontal Siding and Vertical Sliding refers to
    the outer layer of a wall, with shingles or boards or gaps
    subtly angled to shed water. Rather, they’re designed to help spark possibilities in your own mind. Net’s builder has been out for a little more than
    a year, yet it already helped more than 5,000 webmasters to create their online forms.

    ·

  310. popup displays Author Editor

    To help you get through this recession it’s really worthwhile tring to exhibit your goods or services at a trade show or exhibition with eye-catching exhibition banner stands. his tears died for a different reason, for there was no logic to them.

    ·

  311. Y8 Games Author Editor

    Aw, this was a very good post. Finding the time
    and actual effort to make a top notch article… but what
    can I say… I hesitate a lot and never seem to get anything done.

    ·

  312. transport maszyn budowlanych Author Editor

    transport maszyn budowlanych,transport ponadnormatywny, transport ponadgabarytowy

    ·

  313. newwebsitethemes Author Editor

    Colorful and cool drop menu, very easy to customize, having fun and learned a lot from here, thank you for taking time to make this.

    ·

  314. Sagar Author Editor

    Thanks a lot!

    ·

  315. ความรู้ Author Editor

    This is my first time pay a visit at here and i am genuinely
    pleassant to read all at alone place.

    ·

  316. Steph Author Editor

    Hi there

    I have uploaded the files to my cpanel but the menu doesnt seem to show on my website… am i doing anything wrong?

    ·

  317. Steph Author Editor

    I would like to know how to make the menu appear on my site.. I have uploaded the files but the menu isnt showing.. o.O

    Am i doing anything wrong?

    ·

  318. Gabe Author Editor

    is there a way to make it so that when the column lowers it does not push down the rest of the site? so that maybe it goes over, or on top of the div below it? Thanks, and great write up

    ·

 

Build Internet by One Mighty Roar. Since 2008.