Animated Drop Down Menu with jQuery

preview

View the effect

Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.


Step 1: The HTML

Before we can do anything, we need to link our CSS file and our jQuery file in the header our of HTML document:

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsfiles/jquery.js"></script>

These two files will contain our styles and the javascript effect library (duh), but before we can style or animate anything, we need to build the list itself. We are going to use a simple unordered list:

<ul class="menu_body">
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

What we have here is as simple as it looks. We have an unordered list with the class of "menu_body". Inside we have multiple list items, each containing a navigation link. Next we need to add an image above the list. This image will serve as the list’s heading an all that is visible when the drop down is collapsed. It doesn’t have to be an image, this would work exactly the same with text to launch and collapse the menu, I just wanted something visual. If you want to use mine, you can find it here. With the image added we have our complete HTML:

<img src="images/navigate.png" width="184" height="32" class="menu_head" />
<ul class="menu_body">
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

We need to give our image a class name, so we have something to reference by when we start our jQuery. I used the class "menu_head". Here is what we have so far, a completely unstyled list with an image on top:

Unstyled List


Step 2: The CSS

Next we need to give our list some style. First, lets do our top level styling:

body{background:#534741;font-family:Arial, Helvetica, sans-serif; font-size:12px;}
ul, li{margin:0; padding:0; list-style:none;}

Nothing too comples here, just setting a background color, font, and font size. Also, we are telling the list to have no padding, margin, or bullets. Now our list is just a heading and a neat column of links:

Some Style

Now we can style the heading image and each list item. Here is the CSS:

.menu_head{border:1px solid #998675;}
.menu_body {width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_body li{background:#493e3b;}
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}

Here’s what we just did. We added a light tan border around the image "menu_head". On the unordered list "menu_body" we set a width (the same width as our image), and we added a light tan border to every side but the top (there will already be a line there since we have one around our image). We set a background color for each list item and we styled each link. Every link is now white, not underlines, has a nice amount of padding, and is set to a block display (this will make the whole box around the link clickable, not just the text itself).

Here is what our list should look now:

More Style


Step 3: The jQuery

Our first step will be to add the jQuery to tell the list items to alternate their background colors. In the head of your HTML document, add:

<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");
});
</script>

This is a basic jQuery function. When the document is ready, the function will add a special class of "alt" to each alternating row of our list. With the new classes applied, we can add a new CSS rule for the class "alt"

.menu_body li.alt{background:#362f2d;}

Now the rows will alternate between lighter and darker shades of brown, like this:

Row colors

Now the the list has the overall look that we want, we can go ahead and completely hide it with CSS. In the CSS rule for "menu_body" add the property "display:none;" like this:

.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}

If you look at the page now, all you should be able to see if the heading image. For now, the menu has seemingly dissappeared. Time to bring it back with jQuery:

<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");

$('img.menu_head').click(function () {
$('ul.menu_body').slideToggle('medium');

});
});
</script>

We added a new function that runs when the image with the class of "menu_head" is clicked. A click is just one of the events jQuery recognizes. You could also have the function run on mouseover, a key press, or numerous other things. When a click event is registered, jQuery will use the effect slideToggle on the unordered list with the class of "menu_body". jQuery has a large list of effects and various effect plugins, there is really no limit on how you can animate the list sliding open and closed. slideToggle allows you to set a speed, I chose medium, but you can also use "fast", "slow", or define a number in miliseconds.

The menu should now slide open and closed when you click on the heading image:

Animation

You could stop now and have a pretty decent animated menu, but with jQuery its very easy to add simple hover effects. First, we need to add some to our CSS:

.menu_body li a:hover{padding:15px 10px; font-weight:bold;}

This will do two things. When one of our links is hovered over, the padding on the top and bottom will be expanded to 15px (making each rolled over area taller and allowing the shift) and chaning the font weight to bold.

Next we can add some jQuery animation:

<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");
$('img.menu_head').click(function () {
$('ul.menu_body').slideToggle('medium');
});
$('ul.menu_body li a').mouseover(function () {
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
});
});
</script>

We’ve now added a mouseover function, one that runs anytime you mouseover any list item’s link within our unordered list. The function is set to run on "this" which just means the element will run the function on itself. We are using the jQuery effect animate, which allows for many different parameters, along with a duration of time to run them in. We’ve told the function to change the font size to 14px, change the padding-left to 20px, and to do both things in 50 miliseconds.

At this point, the menu can expand and collapse, and the mouseover effect on the links should be working. Now we just need to tell it to reverse the effect when we mouseoff a link. If we don’t tell it to reset each animation, the links will "stick" in their new font size and position. We, of course, want each link to snap back to its original position. We can easily do this like so:

<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");
$('img.menu_head').click(function () {
$('ul.menu_body').slideToggle('medium');
});

$('ul.menu_body li a').mouseover(function () {
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
});

$('ul.menu_body li a').mouseout.(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
});
</script>

This is our last bit of jQuery. It is a function that runs whenever you mouseout of a list item’s link. It will reset the font to the original size (12px), change the padding-left back (to 10px). It will do both things in 50 miliseconds, the same speed as the first half of the animation.

Your menu should now be fully functional. It should be able to click open and close (in a sliding animation) and each link should animate when touched with the mouse (expanding the height, text size, and left-margin). I purposely tried to keep this menu light on images, but this simple effect is really easy to dress up some. For example, each link’s hover state could have an image background. Each image could be specific to each section for a really polished, intuituve menu and it would all fit into a small rectangle when not in use.

You can see the finished menu here.

Download the source files


Introducing QuikTab, a premium CMS style WordPress theme

QuikTab is a standards-compliant, one-page theme powered by WordPress and jQuery. You can buy it at ThemeForest for $12.

392 thoughts on “Animated Drop Down Menu with jQuery

  1. hi clark

    great site you did. now you’re employed, my question is: aside your work do you have some time free for coding or other projects?

    i’m from switzerland, send you greetings and hope to hear from you.

    marc

  2. Pingback: 37 Phenomenal jQuery Plugins and Demos for Developers : Speckyboy - Web Design, Web Development and Graphic Design Resources

  3. Pingback: Animated Drop Down Menu with jQuery Tutorial | webtoolkit4.me

  4. Pingback: Animated Drop Down Menu - Con jQuery y Css

  5. Pingback: Menús animados con javascript jQuery. | Teimagino.com

  6. Pingback: Animated Drop Down Menu with jQuery and CSS

  7. Pingback: renkli teneke » jQuery ve CSS İle Drop Down Animasyonlu Menu

  8. Pingback: Animated Drop Down Menu with jQuery | Exoxfire

  9. Pingback: 37 Fenomenales jQuery Plugins y Demos para Desarrolladores | ProyectoAurora.com

  10. Pingback: Animated Drop Down Menu - Con jQuery y Css at Blog Borchani Studios

  11. Pingback: 50+ jQuery Tutorials und mehr für Einsteiger und Fortgeschrittene

  12. Pingback: 25 jQuery Tutorials for Improved Navigation Menus

  13. Pingback: 13 Excellent jQuery Animation Techniques | Web Design Ledger

  14. Pingback: The best of the jQuery tutorials and plugins | vitali software

  15. Pingback: 100 Best JavaScript Resources | Spoonfed Design

  16. Pingback: Animated Drop Down Menu - Con jQuery y Css at Blog Borchani Studios

  17. @Fede – if you wrap the whole thing in a div and set the div to float (left or right) then when it drops down it will float over your other content.

    The issue I’m having is I can’t get the javascript functions to work. Not even applying the “alt” class works. I just can’t seem to figure out what’s wrong. I did change the class names of my image and unordered list, but I made sure to change the class names in my javascript as well. Any ideas?

  18. Ok. I finally got it to work. So I have a few constructive criticisms to offer those in the future.

    First, make sure you use double quotes when referencing your class names in the javascript. If you use single quotes the effect will not work.

    Also, make sure you use “normal” instead of “medium” for the slideToggle speed.

    You can learn more about slideToggle over at jQuery’s website:
    http://docs.jquery.com/Effects/slideToggle

  19. Pingback: 100个最佳的JavaScript资源(1~20) | 寂静之声

  20. How can i correct program mouseover and mouseout?

    $(‘img.menu_head’).mouseover(function () {
    $(‘ul.menu_body’).slideToggle(‘medium’);
    });

    $(‘img.menu_head’).mouseout(function () {
    $(‘ul.menu_body’).slideToggle(‘medium’);
    });

    When mouseout img.menu.head with mouse to scroll down, then must show on ul.menu.body so long as the mouse leave out ul.menu.body.

    Sorry, i write not good english. I come from Germany.

    Thanking you in advance for this problem solution!

  21. Pingback: Menu Drop Down en Wordpress | Eliseos.Net

  22. Pingback: 20 användbara javaskript och jQuery funktioner som gör din webbsida lite lyxigare | Webbrelaterat

  23. Pingback: 13 Excellent jQuery Animation Techniques | Blog YODspica Ltd

  24. I have experimented with using this in a website(not online). It works great on the mac and in Firefox on the PC but…in IE7 the menu items/text jumps out in HUGE font sizes for a split-second before returning to to regular size.
    A jQuery thing? or perhaps confict with something else in my stylesheet?
    Any leads would be appreciated.
    Thanks.

  25. Hi Clark,

    I love your Quick Tab theme and am thinking about purchasing it within the next couple of days. Would it be possible for me to implement the animated drop down on this them? A couple of the tabs would need to have a submenus. Thanks man.

  26. Pingback: 86 jQuery Resources To Spice Up Your Website | Hi, I'm Grace Smith

  27. Pingback: Menu a discesa animato « TagTagWeb

  28. I really like this menu but like some others I wanted it to function on mouseover and out.
    I am a beginner in javascript and jquery but by looking at another tutorial in jquery I have got it to work.

    $(document).ready(function() {
    $(“ul.menu_body li:even”).addClass(“alt”);
    $(‘.container’).hover(function() {
    $(‘ul.menu_body’).slideToggle(‘medium’);
    }, function() {
    $(‘ul.menu_body’).slideToggle(‘medium’);
    });
    $(‘ul.menu_body li a’).mouseover(function () {
    $(this).animate({ fontSize: “14px”, paddingLeft: “20px” }, 50 );
    });
    $(‘ul.menu_body li a’).mouseout(function () {
    $(this).animate({ fontSize: “12px”, paddingLeft: “10px” }, 50 );
    });
    });

    Seems to work in IE7, Firefox and Safari. If there are problems with this script please let me know.

  29. Pingback: 8 Layout Solutions To Improve Your Designs | How-To | Smashing Magazine

  30. Pingback: 8 Layout Solutions To Improve Your Designs « Wordpress 2.8 Demo

  31. Pingback: Grumpy Git . org » Blog Archive » 8 Layout Solutions To Improve Your Designs

  32. Pingback: 8 Layout Solutions To Improve Your Designs | jeremiahnellis.com/design_life

  33. Pingback: 8种布局解决方案,改善您的设计 | ⊹⊱⋛⋋ISong榮耀ζ組織™⋋⋛⊱⊹

  34. Pingback: 八种布局方案改善你的设计(下) | 互联网的那点事...

  35. Pingback: 译文|8 layout solutions to improve your designs | 小单的青春异次元

  36. Pingback: 36 Eye-Catching Jquery Navigation Menus | 1stwebdesigner - Love In Design

  37. Pingback: 36 Eye-Catching Jquery Navigation Menus « Dogfeeds——IT Telescope

  38. Pingback: jQuery ve CSS Menü | Sanaldev.net

  39. Pingback: 36个引人注目的导航菜单(下) | ⊹⊱⋛⋋ISong榮耀ζ組織™⋋⋛⊱⊹

  40. Pingback: 25 jQuery Tutorials for Improved Navigation Menus | brainstorming magazine | use the brain to get ideas

  41. Hi Clark,

    Got the menu working a little too well!

    Is there a way to create a vertical menu that toggles only when you click one item?

    You can see where I’m at here:
    http://chelseajewish.org

    I’m guessing either indiv. classes such as menu_body1, menu_body2 but I haven’t had much experience with jQuery and I’m not sure how to tweak this code.

    Thanks!
    Jenn

  42. Pingback: 提升设计品质的8个布局方案[SM] | Beleben Design

  43. Pingback: 七平米 » 提升设计品质的8种布局方案

  44. Pingback: 36 Eye-Catching Jquery Navigation Menus | Inseven Designs

  45. Pingback: 35个夺人眼球的jquery菜单下载 | 设计狂

  46. Pingback: Animated Drop Down Menu with jQuery | ZOOOOOMMM on the web | my precious bookmarks

  47. Pingback: 提升网页设计品质的8种布局方案

  48. Pingback: 15 jQuery Tutorials For More Interactive Navigation

  49. Pingback: Best jQuery Interactive Navigation Tutorials for Creative designs. | guidesigner.net

  50. Pingback: UIDeveloperWeb Blog » jQuery Plugins and Demos

  51. Thanks for the tut, its very impressive.
    But i am wondering since this example works with 1 menu , is there a tut with it working with say 4 main horiz menu items floated with the ability to close the previous menu item on mouse out?

  52. Hey!

    I’m quite new to jQuery and certainly not the most-skilled programmer – but thanks to your fine tutorial I fully understood how to get this to work. Great stuff!

    But if you would not like this menu to just toggle but fade in and out I googled a bit and found a solution provided by Karl Swedberg, the Guru himself:

    jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: ‘toggle’}, speed, easing, callback);
    };

    $(‘img.menu_head’).click(function () {
    $(‘ul.menu_body’).fadeToggle();
    });

    This creates a nice fading effect showing or hiding the menu.

    Best regards from Germany,
    T.

  53. Me again …

    In your last paragraph of code there is a mistake where it shows the MOUSEOUT function. There is a ‘.’ in front of the bracket where it says:

    $(‘ul.menu_body li a’).mouseout.(function () {
    $(this).animate({ fontSize: “12px”, paddingLeft: “10px” }, 50 );
    });

    Correct this would be:
    ======================
    $(‘ul.menu_body li a’).mouseout(function () {
    $(this).animate({ fontSize: “12px”, paddingLeft: “10px” }, 50 );
    });

    Anyway, great stuff, really!
    Bstrgrds, T.

  54. Hehehe … me again:

    Is there a way to use a different image in the top menu bar to show an arrow pointing downwards and replacing this bit with an arrow pointing upwards, as long as the menu is collapsed? Has anyone ever thought about that? I think this would look nice and also would directly inform you visually that this menu is already collapsed (should be clear anyhow, but … you know, as a feature?)

    Bstrgrds,
    T.

  55. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Graphics

  56. Pingback: Drop-Down Menu: Usefull CSS Scripts to Enhance Header Navigation | guidesigner.net

  57. Pingback: 30 Drop-Down Menus - Top of your Mind

  58. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Technology you can trust here...

  59. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation - Programming Blog

  60. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation - Programming Blog

  61. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Fulldigi

  62. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | VNAMEDIA Sharing Center

  63. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Internet Marketing Tips and Strategy To Make Money Online

  64. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Download E-Books Free Video Training Courses Softwares

  65. Pingback: 30个免费下拉菜单式导航 » 淘宝导购

  66. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Mac Bargains

  67. Pingback: SOHU媒体技术产品中心-创意设计组 » (转)提升设计品质的8种布局方案

  68. Pingback: 100个最佳的JavaScript资源(1~20) - Hobo

  69. Pingback: Animated Drop Down Menu

  70. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation « test

  71. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | X Design Blog

  72. Pingback: 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger

  73. Pingback: 14 Easy to Implement Drop Down Menu Solutions | X Design Blog

  74. Pingback: links for 2009-08-19 | Digital Rehab

  75. FYI, you’ve used an image on this page that’s bigger than your main content area. It breaks your template by shoving the main content off the left side of the page on a 1024px width monitor. There is no horizontal scroll bar, so your users are screwed.

  76. Pingback: ueb3.com.br :: A web como ela é! » 12 Tutoriais de Menus Animados com jQuery

  77. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | WEBDESIGN FAN

  78. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | WEBDESIGN FAN

  79. Pingback: 現れ方がカッコいいドロップダウンメニュー | 海座の船中八策

  80. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | MEN blog . net

  81. @Fede re: Hi, i have one “problem”. I cant make this to go over objects, images or flash, it’s moves all the content down. It is posible TO FLOAT OVER OBJECTS?

    The most practical solution is to set your “topnav” div to a fixed height and set the overflow to “visible”. That way it won’t stretch and knock everything down and the dropdown will float over the other content.

    best

  82. Pingback: 38 jQuery And CSS Drop Down Multi Level Menu Solutions | Graphic and Web Design Blog - Inspiration, Resources and Tools

  83. Pingback: jQueryとCSSによる多階層ドロップダウンメユーの処理法38 | yuxu's notebook

  84. Pingback: 38 jQuery And CSS Drop Down Multi Level Menu Solutions | huibit05.com

  85. Pingback: 10 incredible JQuery navigation menus

  86. Pingback: Drop-Down Menu: 30+ Useful Scripts To Enhance Header Navigation « Photoshop.vn – Your Design Resource

  87. Pingback: Navigasyon menu | nettuts

  88. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Lunch Time Laugh

  89. Pingback: BlogoTips » 10 Navigatin menus with JQuery

  90. Pingback: 13 Menu Design Tutorial using jQuery

  91. Pingback: 清晰博客 » 36个引人注目JQuery导航菜单

  92. Pingback: 36个引人注目的导航菜单(下) - 518工作室

  93. Pingback: 30+ Drop Down Menu Scrips | oOrch Blog

  94. Pingback: Colección de menús multinivel desarrollados con jQuery y Mootools | Recursos para desarrollo y diseño web - AlmacenPlantillasWeb Blog

  95. Pingback: bi ileti » Site Arşivi » 10 adet navigasyon menü yapımı.

  96. Pingback: 10 incredible JQuery navigation menus « BeginnerPC : Tips , Tricks & Tutorials

  97. Pingback: 30个免费下拉菜单式导航 » 淘宝吧

  98. Pingback: Yoc – A Web Of Flying » 36个引人注目JQuery导航菜单

  99. Pingback: 38 jQuery And CSS Drop Down Multi Level Menu Solutions - Programming Blog

  100. Pingback: Hot Collection of Free jQuery And CSS Drop Down Multi Level Menu Solutions | guidesigner.net

  101. Pingback: JS脚本备忘更新 « 日落旅馆

  102. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | 9Tricks.Com - Tips - Tricks - Tutorials

  103. Pingback: Tutoriais e demos de menus em JQuery | idealMind

  104. Pingback: Os 25+… Menus e Plugins em jQuery! | PixelFont

  105. Pingback: jQuery ve CSS İle Drop Down Animasyonlu Menu | SessizCrew.Com # Interesting Design And Web Projects # İlginç Tasarım Ve Web Projeleri #

  106. Pingback: 25 Menus e Plugins para Jquery | Renan Lima

  107. Pingback: 10 incredible JQuery navigation menus | meshdairy

  108. Pingback: Jquery for Web Design: Navigation | Chicago Web Design

  109. Pingback: 提升设计品质的8个布局方案 | 都市闲人博客

  110. Pingback: Bubblicious » Blog Archive » 15 jQuery Navigation Solutions And Tutorials

  111. Pingback: 50 Cool CSS Menus, Free Source Codes + Tutorials | Theme Center

  112. Pingback: 42 jQuery Navigation based Techniques | Codrops

  113. Pingback: 30 adet css drop down menü | FaydalıWeb | Internetin Faydalı Yüzü

  114. Pingback: 14个下拉菜单解决方案 « SonicHTML – 高品质 HTML+CSS 服务

  115. Pingback: 38 jQuery And CSS Drop Down Multi Level Menu Solutions

  116. Pingback: 38 jQuery And CSS Drop Down Multi Level Menu Solutions | Theme Center

  117. Pingback: 20 menus para jQuery - Desarrollo WEB

  118. Pingback: Styling HTML Lists with CSS: Techniques and Resources - Smashing Magazine

  119. Pingback: 25+ jQuery plugins

  120. Pingback: Animated Dropdown Menu with jQuery « Jbloo

  121. Pingback: CaoInteractive Blog | Graphic & Web Design » Blog Archive » Styling HTML Lists with CSS: Techniques and Resources

  122. Pingback: PHPMan–Live and learn » 38个精美css 和 jQuery 多级下拉菜单实例

  123. Pingback: Анимированные Drop Down меню с JQuery и CSS | Создание сайтов, web программирование

  124. Pingback: 14个出色的导航菜单实例教程 - 菠菜博

  125. Pingback: Professional web designers and web 2.0 experts » Blog Archive » Top 40 Jquery for Web Design: Navigation

  126. Pingback: 享受生活 » 36个引人注目JQuery导航菜单

  127. Pingback: 25 sexy jQuery Drop Down Multi Level Menu — Narga

  128. Pingback: 14个出色的jQuery导航菜单实例教程 « Dfey Creative Minds

  129. I had the same trouble as many of you, where the menu would push content on the page down, instead of floating on top. I asked around and found that the solution is simple. Simply add the following lines of code to your style.css page:

    td
    {
    position:relative;
    }
    .menu_body
    {
    position:absolute;
    /*then use top left to make it in the correctly position*/
    }

    And that’s it – the menu will now float on top of content below it instead of pushing it down.

    Great menu by the way, very attractive and functional. I imagine I’ll be using this on many a website!

  130. Thank You for this. It is great. I have a problem. I can get more than one button next to each other and managed to sort out problem of the whole menu “falling”. I do however have the problem where whichever button I click the dropdown is always the same. THis is no good because you want different dropdown subheadings for each button. I of course have changed the headings in the ‘li’ in the html but for some reason I always get the same dropdown for all buttons when clicked. I wasted the whole day ont his problem.

  131. Pingback: Pattern Inc » 20 Easy-to-Learn jQuery Animation Tutorials

  132. Hello, there is no direct email link anywhere, so i figure i’d post it here. In your downloadable zip file, there is a spelling error in your CSS file that prevents text from shrinking back down to size upon mouserollout. You have fpmt-size:10px; instead of font-size:10px;

    Hope this helps

  133. Pingback: 8种布局方案改善你的设计 | o仔札记 -- W3C标准下的页面构建

  134. Pingback: An animated drop down menu | Web Design Two

  135. Pingback: 37 Fenomenales jQuery Plugins y Demos para Desarrolladores | Proyecto Aurora

  136. Pingback: 五色六彩

  137. Pingback: 25 Excellent jQuery Tutorials for Navigation Menu « AcrisDesign – Web Design Resources and Inspiration

  138. Pingback: Animated Drop Down Menu « Jquery Labs

  139. Pingback: 25+ jQuery Drop Down Menus, CSS Multi Level Drop Down Menu | DHTML & Javascript | Online News & Entertainment

  140. Pingback: 20 Best And Highly Useful jQuery Tutorials For Designers And Beginners

  141. Pingback: jQuery初心者のためのチュートリアル20選 | Web活メモ帳

  142. Pingback: 8 Solutions To Improve Your Design Layout | Techy Minds

  143. Pingback: song-zone!

  144. Pingback: 14 jQuery Tutorials for Amazing Navigation | Vector N Pixel

  145. Pingback: 99 техник создания меню для сайта CSS и jQuery | SHEBEKO.COM

  146. Pingback: 30 Amazing JQuery Navigation Menu Examples » DJDESIGNERLAB – Find All Your Design Inspirations From This Laboratory

  147. Pingback: 推荐八种网页布局技巧

  148. Pingback: 4 Exemplos de menu em JQUERY « O Mundo Do Mário

  149. Pingback: 10 Incredible JQuery Navigation Menus « HUE Designer

  150. Pingback: Free I Share 分享资源 分享快乐 » Blog Archive » 13个优秀的Jquery动画技术

  151. Pingback: 基于jQuery和CSS的动画下拉菜单

  152. Pingback: The Best of jQuery 10 Amazing jQuery Navigation Menus « Defonic International Solutions

  153. Pingback: Best jQuery and CSS multi level & Mega drop down menus - Wsblogz.com – Web design magazine

  154. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Tut7

  155. Pingback: 33 jQuery tutorials to create Navigation Menu

  156. Pingback: 39 tane en iyi jquery Menu | Harbiblog.com - İhtiyacınız Olan Herşey...

  157. Pingback: 33 jQuery tutorials to create Navigation Menu | Photoshop Tutorial and effects

  158. Pingback: 15+ Best Multi Level Menu jQuery Plugins and Tutorials

  159. Pingback: 33 jQuery Menü | SyncapNoktaOrg

  160. Pingback: Membuat Animasi Drop Down Menu dengan jQuery | Belajar Bisnis Online

  161. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation - www.huedesigner.com

  162. Pingback: Excellent jQuery Navigation Menu Tutorials - Noupe

  163. Pingback: Excellent jQuery Navigation Menu Tutorials » Shai Perednik.com

  164. Pingback: Excellent jQuery Navigation Menu Tutorials | DX Articles

  165. Pingback: jQueryを使った、動きのあるナビゲーションメニューチュートリアル集 / TEL CREATIVE DATABASE クリエイティブ総合情報ポータルサイト

  166. Pingback: Excellent jQuery Navigation Menu Tutorials « FED视野

  167. Pingback: 10 פלאגינים שימושיים ב jQuery Drop Down Menu & CSS למפתחי אתרים « עיצוב גרפי וטכנולוגיה

  168. Pingback: 18 Adet jQuery Menü Dersi Demo ve Download | R10Blog.com - Webmaster Blog seo ücretsiz script

  169. Pingback: 36 Eye-Catching Jquery Navigation Menus | Everything of KK

  170. Pingback: 18 Adet jQuery Menü Dersi Demo ve Download | Ezop Webmaster Blogu

  171. Pingback: 15+ Amazing jQuery Navigation Menu Tutorials

  172. Pingback: 35 jQuery Animation Tutorials | iPixel Creative | Singapore Web Design & CMS Development Company Blog

  173. Pingback: 35 jQuery Animation Tutorials » abdie.web.id

  174. Pingback: بیش از ۳۰ خود آموز عالی در زمینه حرکت و انیمیشن در جی کوئری | پارسه آی تی

  175. Pingback: 15+ Harika jQuery Navigasyon Menü Dersi | Tasarim8.com

  176. Pingback: 35 Tutoriales de animaciones en jQuery | Recursos para Diseñadores Gráficos y Web | Creativos Online

  177. HEllo,
    That script is very good, but I ask me how I could do the same but with several menu.
    For exemple:
    NAVGATE – NAVIGATE 1 – NAVIGATE 2 – NAVIGATE 3?

    The goal is to develop only one of them when I click on it

  178. Pingback: 35 Tutoriales de animación con jQuery | Valiomadres

  179. Pingback: 35 jQuery Animation Tutorials

  180. Pingback: بیش از ۳۰ خود آموز عالی در زمینه حرکت و انیمیشن در جی کوئری | ايروني ها

  181. Pingback: 18 Adet jQuery Menü Dersi Demo ve Download -Zingocan | jQuery - CSS Blog

  182. Pingback: travel around world » 35 jQuery Animation Tutorials

  183. Pingback: 37 Amazing Tutorials for jQuery Navigation Menus

  184. Pingback: 36 Eye-Catching Jquery Navigation Menus - Nagpur City

  185. Pingback: 30 Adet jQuery Animation Script(Tutorials) | ilkaymola.com

  186. Pingback: Jquery13 is a place where designers and jquery developers can find very helpful plugins. » 40 Superb Jquery Navigation Menus

  187. Pingback: 提升设计品质的8种布局方案 « 虫子落网记

  188. Pingback: Sample CSS and Javascript | Sample Code

  189. Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Online Tutorials For Designers

  190. Pingback: 25 sexy jQuery Drop Down Multi Level Menu | King F1

  191. Pingback: 25 Menu Espetaculares Com jQuery | Webmaster.pt - Marketocracia Digital

  192. Pingback: 25 jQuery drop down menu Scripts | Vandelay Design Blog | Albanian News And Articles

  193. Pingback: Scripts jQuery para crear menús desplegables en tu sitio

  194. Pingback: 35+ Excellent CSS and jQuery-based Navigation Menu Tutorials and Techniques Collection | Blogger Bits

  195. Pingback: Thatwebdesignguy » 25 jQuery Drop Down Menu Scripts

  196. Pingback: 25 adet Kullanıcı Dostu jquery açılır menü uygulaması

  197. Pingback: 36个引人注目JQuery导航菜单 » 布多的交互设计

  198. Pingback: amazing jquery navigation menu tutorials | ExtraTuts

  199. Pingback: 30+ Web下拉菜单-传播、沟通、分享-一直“有你”

  200. Pingback: 25 Adet Kullanışlı jQuery Açılır Menü Uygulaması | Web Tasarımı

  201. Pingback: 15+ Drop-Down Menu To Make your Website More Attractive | Design Dim

  202. Pingback: Styling HTML Lists with CSS: Techniques and Resources | Ricardo JV Cruz

  203. Pingback: 30 menus em CSS e jQuery gratuitos para seu site | ::adrianogianini - tutoriais, cursos e muito mais

  204. Worked Great, Thank you!

    If you want it to open on Hover In or Out use this:

    $(document).ready(function () {
    $(“ul.menu_body li:even”).addClass(“alt”);
    $(‘img.menu_head’).hover(function () {
    $(‘ul.menu_body’).slideToggle(‘fast’);
    },function() {
    $(‘ul.menu_body’).slideToggle(‘medium’);
    });
    $(‘ul.menu_body li a’).mouseover(function () {
    $(this).animate({ fontSize: “13px”, paddingLeft: “12px” }, 50 );
    });
    $(‘ul.menu_body li a’).mouseout(function () {
    $(this).animate({ fontSize: “12px”, paddingLeft: “10px” }, 50 );
    });
    });

    (make sure to replace single and double quotes when copy pasting from here or it wont work)

    Hope this helps

  205. Pingback: Navigation Menu dengan jQuery + Tutorial | Blog Personal Frenavit Putra

  206. Pingback: 30多个Web下拉菜单 | 子曰博客

  207. Pingback: Minimalist Web Design » 52 Best of the Best jQuery Navigation

  208. Pingback: bagel cafe » jQueryを使ったクールなメニューの作り方 チュートリアル26選

  209. Ótimo o post sobre jquery. O JQUERY veio para facilitar a vida dos programadores tornando mais rapido o desenvolvimento deixando as aplicacoes mais robustas e atraentes tambem. Parabens pelo post. Continue assim.

  210. Pingback: 20+ fresh jQuery Animation Tutorials | Free Resources for Designers & Developers

  211. Pingback: Lista de plugins e templates jquery e css com demos e download »

  212. Pingback: Raccolta di risorse gratuite jQuery per web designer e sviluppatori web.

  213. Pingback: Top 20 jQuery CSS Drop Down Menus | webtrendset

  214. Pingback: 100+ Excellent jQuery Plugins for Navigation and Menus | Stunning Mesh

  215. Pingback: 15 Great jQuery Navigation | jQuery4u

  216. Pingback: 36 Eye-Catching Jquery Navigation Menus | :: DesignZine ::

  217. Pingback: 13 Excellent jQuery Animation Techniques

  218. Pingback: 38个 css 和 jQuery 多级下拉菜单解决方案 | 高品质 HTML+CSS 制作服务 - SonicHTML

  219. Pingback: Beautiful CSS and jQuery Drop down Menu Tutorials | WebsterBox - Web design Blog

  220. Pingback: 32 jQuery and CSS Drop Down Menu Examples and Tutorial | TutorialChip

  221. Pingback: 35 Excellent Jquery And CSS Drop Down Menu | jQuery-Tutorial

  222. Pingback: 5 Professional jQuery Menus | 33Rockers

  223. Pingback: 100+ 优秀的jQuery导航菜单插件/Navigation/Menus | 芦苇网-Lyove Box

  224. Pingback: 25 Jquery уроков по улучшенную навигации

  225. Pingback: 10 incredible JQuery navigation menus | Joko Susamto

  226. Pingback: Excellent jQuery Navigation Menu Tutorials | Woupe Design Blog

  227. Pingback: 10+jQuery Drop Down Menu  | Free Development Resources

  228. Pingback: 36 Eye-Catching Jquery Navigation Menus | Code Album

  229. Pingback: Super4desigN.com -Выпадающее меню CSS, JavaScript, JQuery

  230. Great menu.
    I noticed that you have an error in your script here in the tutorial:

    $(‘ul.menu_body li a’).mouseout.(function () {

    must be

    $(‘ul.menu_body li a’).mouseout(function () {

    Have a nice day!

  231. Pingback: jQuery tutorials to create Navigation Menu | LittleDime

  232. Pingback: Jquery and Web Design Tutorials

  233. Pingback: Drop-Down Menu Useful Scripts To Enhance Header Navigation | How It Easy (HIE) Computing community

  234. Pingback: 37 Phenomenal jQuery Plugins and Demos for Developers

  235. Pingback: Excellent jQuery CSS Animated Navigation Menu Tutorials - DesignModo

  236. Pingback: 25 Top Free jQuery Navigations – Freebies – Web Design Cabin

  237. Pingback: 13 Excellent jQuery Animation Techniques « Blog d'Artefakt

  238. Pingback: Excellent jQuery CSS Animated Navigation Menu Tutorials | Online Music,Movie Entertainment Portal

  239. Thank you so much for this, it helped me a ton!!! I really appreciate the work you did to create this tutorial. It helped me understand jquery better, and incorporate a new menu into my site!!

    Cheers,
    Jeremiah

  240. Pingback: Amazing Jquery Examples with demo and jQuery source code | Upper Pages

  241. Pingback: Drop-Down Menu: 30+ Useful Scripts To Enhance Header Navigation | Erman Aydemir / Blog

  242. Pingback: 超过 30 款 下拉菜单脚本,改善你的导航菜单 | laura's site

  243. I have set this up on my website I am building but I ran into a problem. When it expands it readjusts the size of the page and moves all content under it. I want it to be above all the other content as to not move it when the menu is clicked. Let me know if this makes sense. Thanks!

  244. Pingback: jQuery:款简单实用的CSS+JS下拉菜单脚本 | -牧童印象-交互设计 视觉设计 网页设计

  245. Pingback: 42 jQuery Navigation based Techniques | palkistore

  246. Pingback: 非常优秀的jQuery+CSS实现动态导航菜单教程 @ leo108's blog

  247. Pingback: 38 jQuery And CSS Drop Down Multi Level Menu Solutions | kamranbhutto

  248. Pingback: 55个 jQuery 动态效果资源 | 百锐网

  249. Pingback: 32 jQuery and CSS Drop Down Menu Examples and Tutorial | Chinasb's Blog

  250. Pingback: 13 Teknik Animasi JQuery yang Sangat Mengagumkan

  251. Hi, nice tutorial, i’ve been looking around for one that replaces the combo box default html input in this is one of the best.
    still one little issue though, is there any way we can select item of the list exactly like in a combo box, not just a link i mean

  252. This is awesome and I have it working fine on my site, however. I only have one issue. The drop down menu pushes down the content on the page. Is there a line of code I need to add in the CSS to make the drop down drop over the content?

  253. Pingback: 55 Great jQuery Animation Resources

  254. Pingback: 20 Efectos para jQuery basados en animaciones

  255. Pingback: 36 Beautiful Jquery Navigation Menus | Pixel2Pixel Design - Pixel2Pixel Design

  256. Pingback: 25 jQuery Tutorials for Improved Navigation Menus | Submit Links

  257. Pingback: 25 jQuery Drop Down Menu Scripts | Vandelay Design Blog

  258. Dude, if you’re going to provide a half ass script, at least make it work right and answer your commenters that are having problems with it not working. Your script is pushing the drop down below normal page content. The script is useless unless you can get it to work correctly.

  259. Pingback: javascript和jQuery导航菜单教程 | 酷飞网志

  260. Pingback: 10+ Excellent CSS and jQuery-based Navigation Menu Tutorials | Psdtuts

  261. Pingback: jQuery Techniques for Web Designers @wezilesl | BLOG. wezile

  262. Pingback: 20 Remakable jQuery Navigation Tutorials | WEBAXES

  263. Pingback: Excellent jQuery Navigation Menu Tutorials | Desua the world of Knowledge

  264. Pingback: jQuery and JavaScript Drop Down Menu Free Download | Graphicitvitis

  265. Pingback: بیش از 30 سایت آموزش آنلاین جی کوئری | پرتال آموزشی آکسایا

  266. Pingback: 15 excellent jQuery of navigation menu plugin

  267. Pingback: jQueryとCSSで作るドロップダウンメニューのスクリプトまとめ | TOPICK(トピック)

  268. Pingback: 25 Amazing CSS Navigations and JQuery Examples | Web Design Core

  269. Pingback: Jquery Navigation Menus: 35+ Eye-Catching Jquery Navigation Menus |

  270. Pingback: Herbeth Santana

  271. Pingback: Sacima鲨鳍马工作室 » Blog Archive » 100 Great CSS Menu Tutorials

  272. Pingback: 100 Great CSS Menu Tutorials

  273. Pingback: 100 个强大的 CSS 制作菜单的教程 | 吉林SEO | 打造专业的吉林网站优化团队

  274. Pingback: 25 Menus Espetaculares em Jquery : TudoFilme

  275. Pingback: 10 Tutoriais de como criar um menu em jQuery - UGLYMAN

  276. lets try again

    <div style=”height:200px; background-color: blue;”></div>
    <div id=”menudiv” style=”background-color:#534741; height: 26px; left: 0px; right: 0px; “></div>
    <div style=”z-index: -1;position:relative;top:26px;height:200px; background-color: green;”><input type=”text”/> </div>

  277. Pingback: 54 Drop Down menu tutorials for your Website

  278. Pingback: 100 Great CSS Menu Tutorials - pocongseXy ::Art and Dezign::

  279. Pingback: 30 CSS Menu Tutorials to Build Attractive Menus | Flash User

  280. Pingback: 30个Jquery做Menu的插件 | 千文

  281. Pingback: CSS导航栏/菜单教程 – 紫萝卜 | 所有与设计有关

  282. Pingback: How To Improve Header Of Websites: Useful Stuff | DesDevWeb

  283. Pingback: CSS导航栏/菜单教程 | logolomo

  284. Hi
    I have a problem.

    I am experimenting a little bit (this is the first time I have used JQuery) and figured that it would be nice open and close the menues with an mouseover and mouseout function instead of a clickfunction.

    Now the problem is as follows: I works.
    The downside is that when I move the mouse down to click on a menuitem the menu closes since I move the mouse of the image.

    Question: Is it possible to say to JQuery: Only close the menu if mouseout top, right and left and click menuitem?

    I can probaly figure out the last one myself, but the first one (mouseout top, right and left ) is more than I can handle.

    This is my code:
    $(document).ready(function () {
    $("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').mouseover(function () {
    $('ul.menu_body').slideToggle('fast');
    });
    $('ul.menu_body li a').mouseover(function () {
    $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
    $('ul.menu_body li a').mouseout(function () {
    $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });

    $('img.menu_head').mouseout(function () {
    $('ul.menu_body').slideToggle('fast');
    });
    });

    Kind Regards

  285. Thanks for posting the tutorial. I think this code would be perfect if the drop down disappeared when you click anywhere on the screen rather than needing to click inside the div.

    This seems to be the standard on sites like Flickr and jsFiddle.

    Can someone post a how to on this function?

  286. Great tips on animated drop-down menu with jQuery. We’ve been looking for something like this for a long time and have tried so many different methods. We’re looking for somethign that is elegant yet easy to implement. We will this on one of our clients’ site and see how it would work out.Thanks for sharing with us.

  287. Pingback: Beautiful jQuery navigation menu example with demo and source code | codingquery.com

  288. Pingback: 36 Eye-Catching Jquery Navigation Menus

  289. Pingback: Animated Drop Down Menu with jQuery | arzrasel

  290. Pingback: Html Css Jquery Javascript Based Super Powerful jQuery Navigation Menus and Menu Plugins Tutorials | Thenewsblock

  291. Pingback: 40 Resources for Getting Started with jQuery Development