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 156 Mentions

  1. 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)

      ·

  2. 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?

    ·

  3. rohan Author Editor

    Good work dude..

    ·

  4. Milad Author Editor

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

    ·

  5. Mba Author Editor

    Nice Collection…..

    ·

  6. sudhansu Author Editor

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

    ·

  7. star hotels Author Editor

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

    ·

  8. mortimer Author Editor

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

    ·

  9. Najath Author Editor

    thankx man its working……………….

    ·

  10. michell Author Editor

    hello

    ·

  11. mark Author Editor

    Flip it over!!!

    ·

  12. Arun Author Editor

    It is marvelous….

    ·

  13. Guest house Author Editor

    Its Really Amazing Menu….

    ·

  14. orchid Author Editor

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

    ·

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

      ·

  16. Anirudh Author Editor

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

    ·

  17. Patricio Bustamante Author Editor

    Uumm, not working, right now.
    :(

    ·

  18. Megan Author Editor

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

    ·

  19. Paying Guest Author Editor

    This menus is really good…. Thanks for posting it

    ·

  20. john Author Editor

    dei… give the full details

    ·

  21. Wedding photographer Author Editor

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

    ·

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

      ·

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

    ·

  24. Zach Dunn Author Editor

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

    ·

  25. Ups in chennai Author Editor

    Menu is looking great…. Thanks for sharing it

    ·

  26. Om Author Editor

    Thanks for great tutorial …really nice I like it

    ·

  27. 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?

    ·

  28. Rafal I Jarzebski Author Editor

    Well made and great help. Thank you.

    ·

  29. smiindia Author Editor

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

    ·

  30. smiindia Author Editor

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

    ·

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

    ·

  32. 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]

        ·

  33. Dermatologists Author Editor

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

    ·

  34. Dinesh Kumar Shaw Author Editor

    Thanks for sharing this awesome post.

    ·

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

    ·

  36. Car Accessories Author Editor

    Very Nice Menu… Thanks a lot for sharing this menu

    ·

  37. Christian Author Editor

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

    ·

  38. Felix Author Editor

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

    Thanks.

    ·

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

    ·

  40. 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?

    ·

  41. Jess Author Editor

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

    ·

  42. Car hire chennai Author Editor

    This menu is really worth… Thanks for sharing it

    ·

  43. Martina Author Editor

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

    ·

  44. asansör Author Editor

    thank you firiend.ı like it….

    ·

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

    ·

  46. holen Author Editor

    i like this!nice menu…

    ·

  47. Y8 games Author Editor

    I like too… thanks for sharing

    ·

  48. oil coolers Author Editor

    nice post thanks for sharing it

    ·

  49. Plastic bags manufacturer Author Editor

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

    ·

  50. John Author Editor

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

    ·

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

    ·

  52. Posizionamento siti Author Editor

    Really interesting tut! very good!

    ·

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

    ·

  54. 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?

    ·

  55. 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?

    ·

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

    i like it tnx

    ·

  57. kivovo Author Editor

    Just couldn’t leave without saying thank you.

    ·

  58. 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?

    ·

  59. sourabh Author Editor

    yuppp!!!!great animation

    ·

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

    ·

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

    ·

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

    ·

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

        ·

  64. fabir Author Editor

    well done! great thanks

    ·

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

    ·

  66. Cliff Author Editor

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

    ·

  67. 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?

    ·

  68. Kaye Author Editor

    This is great stuff. Thanks!

    ·

  69. 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?

    ·

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

    ·

  71. Ardell Nydick Author Editor

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

    ·

  72. Camsoptopsy Author Editor

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

    ·

  73. Jai Author Editor

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

    ·

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

    ·

  75. Graphic Designer Author Editor

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

    ·

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

    ·

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

    ·

  78. 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]

    ·

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

    ·

  80. mayzin Author Editor

    so perfect tutorial for smooth animated menu with jquery!

    ·

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

    ·

  82. Mizuki Author Editor

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

    ·

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

    ·

  84. bip Author Editor

    Very nice menu. Thanks for sharing

    ·

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

    ·

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

    ·

  87. Ben Author Editor

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

    ·

  88. lta Author Editor

    tnx a lot

    ·

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

    ·

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

      ·

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

    ·

  92. Paul curran Author Editor

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

    ·

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

    ·

  94. dani Author Editor

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

    ·

  95. dani Author Editor

    It dont work in IE?

    ·

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

    ·

  97. 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?

    ·

  98. 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/

    ·

  99. 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?

      ·

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

    ·

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

      ·

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

    ·

  103. 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/

    ·

  104. DRN Author Editor

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

    Thanks in advance!!

    ·

  105. 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 ?

    ·

  106. Mark Author Editor

    i got the answer. thanks.

    ·

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

    ·

  108. Suku Author Editor

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

    ·

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

    ·

  110. 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?

    ·

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

    ·

  112. Fabir Author Editor

    I was looking to find answers on this
    Thanks

    ·

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

    ·

  114. sercan Author Editor

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

    ·

  115. 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?

    ·

  116. 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?

    ·

  117. acompanhantes brasilia Author Editor

    You are great and thank for you articles

    ·

  118. asansonculersitesi Author Editor

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

    ·

  119. Diana Author Editor

    thk so much….

    ·

  120. Cricketers Author Editor

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

    ·

  121. Cuisine algerienne Author Editor

    Thank you for this tuto

    ·

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

    ·

  123. Gerrit Author Editor

    How can i get the active state to work?

    ·

  124. przewoz mebli Author Editor

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

    I wanted to write a little comment to support you.

    ·

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

    GRAET TANX ADMIN

    ·

  126. Eduardo Author Editor

    Super cool… :)

    ·

  127. 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…

    ·

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

    strongly…

    ·

  129. seven Author Editor

    hello,Thanks for the code~

    ·

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

    ·

  131. stephen Author Editor

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

    ·

  132. pompa Author Editor

    thank for you code.

    ·

  133. david944 Author Editor

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

    ·

  134. سئو Author Editor

    Thank you .

    ·

  135. Bang Kamplenk Author Editor

    Keren banget masbro…
    Tapi saya masih bingung untuk praktekinnya

    riefsaz.blogspot.com

    ·

  136. Bhuwan Roka Author Editor

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

    ·

  137. acompanhantes brasilia Author Editor

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

    ·

  138. 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?

    ·

  139. Ryan Author Editor

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

    ·

  140. prefabrik Author Editor

    Thank you…

    ·

  141. Ö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.

    ·

  142. Özer Author Editor

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

    ·

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

    ·

  144. André Author Editor

    Thank you so much. Love it!

    ·

  145. malak Author Editor

    thanks a bunch! you saved me lot of time.

    ·

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

    ·

  147. Humberto Author Editor

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

    ·

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

    ·

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

    best website
    tnx admin

    ·

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

    ·

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

    ·

  152. Jamesbouu Author Editor

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

    ·

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

    ·

  154. John Author Editor

    How do I add more than three items on one menu

    ·

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

    ·

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

    ·

  157. Arifa Author Editor

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

    ·

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

    ·

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

    ·

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

    ·

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

    ·

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

    ·

  163. tvbmediahub Author Editor

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

    ·

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

    ·

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

    ·

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

    ·

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

    ·

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

    ·

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

    ·

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

    ·

  171. transport maszyn budowlanych Author Editor

    transport maszyn budowlanych,transport ponadnormatywny, transport ponadgabarytowy

    ·

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

    ·

  173. Sagar Author Editor

    Thanks a lot!

    ·

  174. ความรู้ Author Editor

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

    ·

  175. 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?

    ·

  176. 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?

    ·

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