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.

DATE9th October, 2008

CATEGORIESposts

TAGS , , ,

393 Comments

  1. Really cool design…

    defiantly going to use this somewhere.

    http://www.leafydesignz.co.za

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

  3. jane

    this is great, but how would you use this as a horizontal menu? it breaks the menu items when you click on them, so the entire top level menu items move down below and open up.

  4. Thank you for your website :)
    I made on photoshop backgrounds for myspace or youtube and ect..
    my backgrounds:http://tinyurl.com/6r7cav
    all the best and thank you again!

  5. Very nice menu indeed. It reminds me the top “Envato Networks” menu on Nettuts, PSDtuts and so on.

    I don’t really like the effects as you rollover a link though. I think that could be improved.

    Keep up the good work.

  6. steve

    hi, how can add more buttons and drop menu?? I cant :( why just one? please help!!! thanks

  7. Rodney

    Thanks for the wonderful tut. Deffinately going to use this one. I was wondering is it possible if you could try and explain how this was done in jquerry?

    http://www.filamentgroup.com/lab/
    jquery_ipod_style_drilldown_menu/

  8. Casey

    This is great! How would you modify it to use mouseover and mouseout to toggle the menu’s visibility?

  9. i’m having problem viewing this page. pls fix it. screenshot attached as my website

  10. Nick

    I wonder are there a code that if person unmouseover the menu. so it forces menu to close it istead of have to click it to close it?? im curious.

  11. awake

    i’ve not viewed the code yet, but I loved the demo.

    i was looking for somethign similar to what envato (netut guys) had.

    thanks a bunch

  12. 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?
    Thanks in advance.

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

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

  15. daredanger

    Cannot find navigate.png file in the link that you have given in your post. You have given this link http://www.clarklab.com/blog/posts/animated-drop-down-menu-with-jquery/images/navigate.png. When I visited this page I got Not Found error page. Please update us with another working link or make this link work.

  16. Binno

    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!

  17. carl

    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.

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

  19. awake

    I think I like this version, but there another version @ site below

    - http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/

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

  21. You will also need to add to the CSS:

    .container {
    width: 184px;
    }

  22. Jim

    Just FYI: Your layout extends beyond the left margin limit using IE7 and IE8. Just thought you’d like to know.
    Screenshot:
    http://www.nwcic.com/clarklab/clarklab-shot.png

    Best of success,
    JL

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

  24. Dennis G

    Hi there. I really like this script (http://clarklab.com/lessons/dropdown/example.html). The one thing is that I was trying to modify it such that it will open onmouseover and close onmouseout of anywhere on the menu. Did you have a version like this? Let me know – thanks in advance!

    Dennis

  25. Hi Again!

    I found the answer via the Jquery forum to the “all submenus opening at once” issue.

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

    Now it works.

  26. Hi!
    One more thing. The dropdown is not working in Safari and IE (6-8) Has anyone experimented with creating conditional CSS to handle this? Has anyone else had browser compatibility issues?

    Thanks

  27. Franklyn

    The preview is blacklisted by google.

  28. AlexQ

    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?

  29. Tobias H.

    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.

  30. Tobias H.

    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.

  31. Tobias H.

    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.

  32. Very nice application. i can get starting re-designing my website.

  33. Great drop down effect, the only concern I have is with the usability for people who have javascript disabled on their browsers.

  34. David

    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.

  35. timmyo

    @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

  36. Thanks this info..

    Your web site full professional…

  37. awake

    ur the man…

  38. awake

    How can one prevent this menu from pushing down the whole page???

  39. Awsome Effect – very nicely designed too! I am definetley going to use this effect, thank you so much for presenting it!

  40. Andrew

    Very good tutorial, I am bookmarking your website for future reference and further jQueryness! :D

  41. Nice tutorial. For those who need a version that works on mouseover and mouseout, I’ve written a tutorial on my blog: http://www.mindsculpt.net/2009/11/jquery-animated-rollover-drop-down-navigation/

    I needed it to work that way for a project, so I rewrote it based on the code here and thought I’d share it with everyone.

  42. Hi,

    Thanks for the great menu. I have a slight problem. In IE 7 there seems to be a 5px gap just above the menu and below the header image. This is the same on your demo page of your menu. Is there any way to fix this.

    Cheers

    Steve

  43. timo

    Hello

    if i use another menu same time.
    navigation dosent work. both menus opening at same time. do you have somekind of solution?

    timo

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

  45. Rakim

    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.

  46. Kris

    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

  47. very useful thanks

  48. Can anyone tell me how to put a cursor on the drop down menu so it appears more like a link?

  49. This was a great post. Quick and easy and you explained why you needed each line. I’ve taken it and customized it to fit my application needs. You can check it out here: http://www.fredmastro.com/post/My-Customized-version-of-ClarkLabe28099s-Animated-Drop-Down-Menu-with-jQuery.aspx

    I used it to copy dates from one date picker to the next.

  50. Yeah, I like this idea of drop down menu much better. Can’t wait to try on my own. Thank you

  51. very good!

    thanks !

    I am form china!

  52. I am having a problem with this in IE 6,7,8. The menu expands to the right of the drop down menu.

    I have added in absolute positioning and z-index so the menu does not push down the rest of the page.

    You can see it not working at:
    http://www.nothinghidden.com.au/

    Any ideas on how to fix?

  53. A very VERY nice post… Many thanks :D

  54. This is really “pesdets” (pesdets – bad Russian word) in IE6.
    But menu is nice…. (:

  55. Pierrot10

    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

  56. Good Inspiration…………….
    Thank You……………

  57. Very useful , You save my site.
    Thanks a lot.

  58. Rider-LV

    Hello, I have same problem as Pierrot10 – script works for all menus same time, and I dont have various names for menus.

    Please help me.

    And thanks for great menu!

  59. Nice useful article keep posting like this.. Thanks for sharing this info.
    My Blog

  60. Thanks for this post.
    Exactly what I was looking for.
    Simple, but very effective.
    Am integrating it now into our website.

  61. oooo very very nice shared ;)

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

  63. Zeronix

    Thats so awesome.
    Thank you very much for this great tutorial :)

  64. Ó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.

  65. Lorencolit

    Is it possible to contact administration?
    Thank you

  66. Nice article i’m gonna do a similar control that will be a multi level vertical slider menu. I got my idea clear thx

  67. Ron

    Fantastic write up there mate, many thanks :)

  68. Excellent scripts! Another great source for those who wants to see menus, web site trends, galleries, free extension and job for freelancers etc, visit http://www.1artmedia.com, you have online demo and free download. Hope that will be useful for you…

  69. Very good clear article. Thanks for posting

  70. AssangeNal

    Where is admin?!
    Hope for no silence
    bye bye ;))

  71. Your own link is not working. Returns with 404 Not Found error

  72. moke

    guud! like this

  73. Jan

    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!

  74. Eduardo

    I want to use this menu in horizontal mode: 5x categories with slidedown.
    How can I use? :s

  75. Gerçekten Güzel bir menü olmuş teşekkürler ben yaptım güzel oldu paylaşmak istedim

    buradan indirebilirsiniz

    https://rapidshare.com/files/457399525/men___tasarae_m.rar

  76. Jeremiah

    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

  77. Hmmm Amazing …
    How to create more in post sliding on this site ?

  78. Drew

    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!

  79. emma vine

    fab tutorial, the only issue is i have more than one nested list, it wont let me apply it to them both any ideas?

  80. Cool……

    i will use for my web….

    thanks for share…..

  81. Hmmm Amazing …

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

  83. Anthony

    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?

  84. Thx bro.. be nice collection …. Download now :D

  85. chris

    how to automated drop down&slide up?
    mouse over.. ?!

  86. Hello. I’ve done everything according to this. Works great on my Google Chrome, Safari, and Internet Explorer but fails to work at all on Mozilla Firefox. Any advice?

    Thanks

  87. Ben

    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.

  88. Thanks for sharing this tutorial.

  89. I’d like to change some money free nymphet tgp tctf

  90. Mike

    For those with problem of having it push down content, throw it in a div with position: absolute; you may have to change the z-index of the content that follows to -1;

    MENU GOES HERE

  91. Mike

    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>

  92. Have you got any qualifications? Mini Models Nude
    0509

  93. eccellente a sserias si vados renteso con anader. rabeis peludonto se divos son parerio mi pedia janos y cimagia demeche ncasmo.

  94. Great Turtail! Used it for my Website!

  95. Mikael

    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

  96. Olá,
    Gostaria de parabenizar pelo conteúdo de altíssima qualidade, gostaria de solicitar permissão para utilização.

    Desde de Já Agradeço.

    Abraços!

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

  98. Deepak Pathak

    This was so nice ! Thanks for saving my day.

  99. I do agree with all of the concepts you’ve presented in your post. They’re very convincing and will certainly work. Still, the posts are very brief for novices. Could you please prolong them a bit from next time? Thanks for the post.

  100. Thanks for any other informative website. Where else could I am getting that type of info written in such an ideal way? I have a venture that I’m just now operating on, and I’ve been at the glance out for such information.

  101. I tried this creating an Animated Drop Down Menu and it was awesome!

  102. asdf

    What a fucking post is this

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

  104. Hi there, this is really good tutorial for drop down. thanks for sharing it.

  105. There is an error when i want to download the exemple

  106. very useful and very nice article thank you

  107. fdsf

    fuck you, everythink files are missing.
    Examples, codes.

  108. All the files are missing, someone can repost the files please :)

  109. abhi

    unable to download source files

  110. Thanks this for application :)

  111. PL

    Your demo doesn’t work, I wanted to show it off in one of my posts :)

  112. iman

    Download link is broken!!!!

  113. MJalid

    Download link is broken

  114. The download link does not work

  115. The example link is not working

  116. Very useful, very much underlines all the information needed and thanks for sharing.

Trackbacks for this post

  1. 37 Phenomenal jQuery Plugins and Demos for Developers : Speckyboy - Web Design, Web Development and Graphic Design Resources
  2. Animated Drop Down Menu with jQuery Tutorial | webtoolkit4.me
  3. Animated Drop Down Menu - Con jQuery y Css
  4. Menús animados con javascript jQuery. | Teimagino.com
  5. Animated Drop Down Menu with jQuery and CSS
  6. renkli teneke » jQuery ve CSS İle Drop Down Animasyonlu Menu
  7. Animated Drop Down Menu with jQuery | Exoxfire
  8. 37 Fenomenales jQuery Plugins y Demos para Desarrolladores | ProyectoAurora.com
  9. Animated Drop Down Menu - Con jQuery y Css at Blog Borchani Studios
  10. 50+ jQuery Tutorials und mehr für Einsteiger und Fortgeschrittene
  11. 25 jQuery Tutorials for Improved Navigation Menus
  12. 13 Excellent jQuery Animation Techniques | Web Design Ledger
  13. The best of the jQuery tutorials and plugins | vitali software
  14. 100 Best JavaScript Resources | Spoonfed Design
  15. Animated Drop Down Menu - Con jQuery y Css at Blog Borchani Studios
  16. 100个最佳的JavaScript资源(1~20) | 寂静之声
  17. Menu Drop Down en Wordpress | Eliseos.Net
  18. 20 användbara javaskript och jQuery funktioner som gör din webbsida lite lyxigare | Webbrelaterat
  19. 13 Excellent jQuery Animation Techniques | Blog YODspica Ltd
  20. 86 jQuery Resources To Spice Up Your Website | Hi, I'm Grace Smith
  21. Menu a discesa animato « TagTagWeb
  22. 8 Layout Solutions To Improve Your Designs | How-To | Smashing Magazine
  23. 8 Layout Solutions To Improve Your Designs « Wordpress 2.8 Demo
  24. Grumpy Git . org » Blog Archive » 8 Layout Solutions To Improve Your Designs
  25. 8 Layout Solutions To Improve Your Designs | jeremiahnellis.com/design_life
  26. 8种布局解决方案,改善您的设计 | ⊹⊱⋛⋋ISong榮耀ζ組織™⋋⋛⊱⊹
  27. 八种布局方案改善你的设计(下) | 互联网的那点事...
  28. 译文|8 layout solutions to improve your designs | 小单的青春异次元
  29. 36 Eye-Catching Jquery Navigation Menus | 1stwebdesigner - Love In Design
  30. 36 Eye-Catching Jquery Navigation Menus « Dogfeeds——IT Telescope
  31. jQuery ve CSS Menü | Sanaldev.net
  32. 36个引人注目的导航菜单(下) | ⊹⊱⋛⋋ISong榮耀ζ組織™⋋⋛⊱⊹
  33. 25 jQuery Tutorials for Improved Navigation Menus | brainstorming magazine | use the brain to get ideas
  34. 提升设计品质的8个布局方案[SM] | Beleben Design
  35. 七平米 » 提升设计品质的8种布局方案
  36. 36 Eye-Catching Jquery Navigation Menus | Inseven Designs
  37. 35个夺人眼球的jquery菜单下载 | 设计狂
  38. Animated Drop Down Menu with jQuery | ZOOOOOMMM on the web | my precious bookmarks
  39. 提升网页设计品质的8种布局方案
  40. 15 jQuery Tutorials For More Interactive Navigation
  41. Best jQuery Interactive Navigation Tutorials for Creative designs. | guidesigner.net
  42. UIDeveloperWeb Blog » jQuery Plugins and Demos
  43. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Graphics
  44. Drop-Down Menu: Usefull CSS Scripts to Enhance Header Navigation | guidesigner.net
  45. 30 Drop-Down Menus - Top of your Mind
  46. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Technology you can trust here...
  47. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation - Programming Blog
  48. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation - Programming Blog
  49. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Fulldigi
  50. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | VNAMEDIA Sharing Center
  51. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Internet Marketing Tips and Strategy To Make Money Online
  52. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Download E-Books Free Video Training Courses Softwares
  53. 30个免费下拉菜单式导航 » 淘宝导购
  54. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Mac Bargains
  55. SOHU媒体技术产品中心-创意设计组 » (转)提升设计品质的8种布局方案
  56. 100个最佳的JavaScript资源(1~20) - Hobo
  57. Animated Drop Down Menu
  58. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation « test
  59. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | X Design Blog
  60. 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger
  61. 14 Easy to Implement Drop Down Menu Solutions | X Design Blog
  62. links for 2009-08-19 | Digital Rehab
  63. ueb3.com.br :: A web como ela é! » 12 Tutoriais de Menus Animados com jQuery
  64. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | WEBDESIGN FAN
  65. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | WEBDESIGN FAN
  66. 現れ方がカッコいいドロップダウンメニュー | 海座の船中八策
  67. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | MEN blog . net
  68. 38 jQuery And CSS Drop Down Multi Level Menu Solutions | Graphic and Web Design Blog - Inspiration, Resources and Tools
  69. jQueryとCSSによる多階層ドロップダウンメユーの処理法38 | yuxu's notebook
  70. 38 jQuery And CSS Drop Down Multi Level Menu Solutions | huibit05.com
  71. 10 incredible JQuery navigation menus
  72. Drop-Down Menu: 30+ Useful Scripts To Enhance Header Navigation « Photoshop.vn – Your Design Resource
  73. Navigasyon menu | nettuts
  74. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Lunch Time Laugh
  75. BlogoTips » 10 Navigatin menus with JQuery
  76. 13 Menu Design Tutorial using jQuery
  77. 清晰博客 » 36个引人注目JQuery导航菜单
  78. 36个引人注目的导航菜单(下) - 518工作室
  79. 30+ Drop Down Menu Scrips | oOrch Blog
  80. Colección de menús multinivel desarrollados con jQuery y Mootools | Recursos para desarrollo y diseño web - AlmacenPlantillasWeb Blog
  81. bi ileti » Site Arşivi » 10 adet navigasyon menü yapımı.
  82. 10 incredible JQuery navigation menus « BeginnerPC : Tips , Tricks & Tutorials
  83. 30个免费下拉菜单式导航 » 淘宝吧
  84. Yoc – A Web Of Flying » 36个引人注目JQuery导航菜单
  85. 38 jQuery And CSS Drop Down Multi Level Menu Solutions - Programming Blog
  86. Hot Collection of Free jQuery And CSS Drop Down Multi Level Menu Solutions | guidesigner.net
  87. JS脚本备忘更新 « 日落旅馆
  88. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | 9Tricks.Com - Tips - Tricks - Tutorials
  89. Tutoriais e demos de menus em JQuery | idealMind
  90. Os 25+… Menus e Plugins em jQuery! | PixelFont
  91. jQuery ve CSS İle Drop Down Animasyonlu Menu | SessizCrew.Com # Interesting Design And Web Projects # İlginç Tasarım Ve Web Projeleri #
  92. 25 Menus e Plugins para Jquery | Renan Lima
  93. 10 incredible JQuery navigation menus | meshdairy
  94. Jquery for Web Design: Navigation | Chicago Web Design
  95. 提升设计品质的8个布局方案 | 都市闲人博客
  96. Bubblicious » Blog Archive » 15 jQuery Navigation Solutions And Tutorials
  97. 50 Cool CSS Menus, Free Source Codes + Tutorials | Theme Center
  98. 42 jQuery Navigation based Techniques | Codrops
  99. 30 adet css drop down menü | FaydalıWeb | Internetin Faydalı Yüzü
  100. 14个下拉菜单解决方案 « SonicHTML – 高品质 HTML+CSS 服务
  101. 38 jQuery And CSS Drop Down Multi Level Menu Solutions
  102. 38 jQuery And CSS Drop Down Multi Level Menu Solutions | Theme Center
  103. 20 menus para jQuery - Desarrollo WEB
  104. Styling HTML Lists with CSS: Techniques and Resources - Smashing Magazine
  105. 25+ jQuery plugins
  106. Animated Dropdown Menu with jQuery « Jbloo
  107. CaoInteractive Blog | Graphic & Web Design » Blog Archive » Styling HTML Lists with CSS: Techniques and Resources
  108. PHPMan–Live and learn » 38个精美css 和 jQuery 多级下拉菜单实例
  109. Анимированные Drop Down меню с JQuery и CSS | Создание сайтов, web программирование
  110. 14个出色的导航菜单实例教程 - 菠菜博
  111. Professional web designers and web 2.0 experts » Blog Archive » Top 40 Jquery for Web Design: Navigation
  112. 享受生活 » 36个引人注目JQuery导航菜单
  113. 25 sexy jQuery Drop Down Multi Level Menu — Narga
  114. 14个出色的jQuery导航菜单实例教程 « Dfey Creative Minds
  115. Pattern Inc » 20 Easy-to-Learn jQuery Animation Tutorials
  116. 8种布局方案改善你的设计 | o仔札记 -- W3C标准下的页面构建
  117. An animated drop down menu | Web Design Two
  118. 37 Fenomenales jQuery Plugins y Demos para Desarrolladores | Proyecto Aurora
  119. 五色六彩
  120. 25 Excellent jQuery Tutorials for Navigation Menu « AcrisDesign – Web Design Resources and Inspiration
  121. Animated Drop Down Menu « Jquery Labs
  122. 25+ jQuery Drop Down Menus, CSS Multi Level Drop Down Menu | DHTML & Javascript | Online News & Entertainment
  123. 20 Best And Highly Useful jQuery Tutorials For Designers And Beginners
  124. jQuery初心者のためのチュートリアル20選 | Web活メモ帳
  125. 8 Solutions To Improve Your Design Layout | Techy Minds
  126. song-zone!
  127. 14 jQuery Tutorials for Amazing Navigation | Vector N Pixel
  128. 99 техник создания меню для сайта CSS и jQuery | SHEBEKO.COM
  129. 30 Amazing JQuery Navigation Menu Examples » DJDESIGNERLAB – Find All Your Design Inspirations From This Laboratory
  130. 推荐八种网页布局技巧
  131. 4 Exemplos de menu em JQUERY « O Mundo Do Mário
  132. 10 Incredible JQuery Navigation Menus « HUE Designer
  133. Free I Share 分享资源 分享快乐 » Blog Archive » 13个优秀的Jquery动画技术
  134. 基于jQuery和CSS的动画下拉菜单
  135. The Best of jQuery 10 Amazing jQuery Navigation Menus « Defonic International Solutions
  136. Best jQuery and CSS multi level & Mega drop down menus - Wsblogz.com – Web design magazine
  137. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Tut7
  138. 33 jQuery tutorials to create Navigation Menu
  139. 39 tane en iyi jquery Menu | Harbiblog.com - İhtiyacınız Olan Herşey...
  140. 33 jQuery tutorials to create Navigation Menu | Photoshop Tutorial and effects
  141. 15+ Best Multi Level Menu jQuery Plugins and Tutorials
  142. 33 jQuery Menü | SyncapNoktaOrg
  143. Membuat Animasi Drop Down Menu dengan jQuery | Belajar Bisnis Online
  144. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation - www.huedesigner.com
  145. Excellent jQuery Navigation Menu Tutorials - Noupe
  146. Excellent jQuery Navigation Menu Tutorials » Shai Perednik.com
  147. Excellent jQuery Navigation Menu Tutorials | DX Articles
  148. jQueryを使った、動きのあるナビゲーションメニューチュートリアル集 / TEL CREATIVE DATABASE クリエイティブ総合情報ポータルサイト
  149. Excellent jQuery Navigation Menu Tutorials « FED视野
  150. 10 פלאגינים שימושיים ב jQuery Drop Down Menu & CSS למפתחי אתרים « עיצוב גרפי וטכנולוגיה
  151. 18 Adet jQuery Menü Dersi Demo ve Download | R10Blog.com - Webmaster Blog seo ücretsiz script
  152. 36 Eye-Catching Jquery Navigation Menus | Everything of KK
  153. 18 Adet jQuery Menü Dersi Demo ve Download | Ezop Webmaster Blogu
  154. 15+ Amazing jQuery Navigation Menu Tutorials
  155. 35 jQuery Animation Tutorials | iPixel Creative | Singapore Web Design & CMS Development Company Blog
  156. 35 jQuery Animation Tutorials » abdie.web.id
  157. بیش از ۳۰ خود آموز عالی در زمینه حرکت و انیمیشن در جی کوئری | پارسه آی تی
  158. 15+ Harika jQuery Navigasyon Menü Dersi | Tasarim8.com
  159. 35 Tutoriales de animaciones en jQuery | Recursos para Diseñadores Gráficos y Web | Creativos Online
  160. 35 Tutoriales de animación con jQuery | Valiomadres
  161. 35 jQuery Animation Tutorials
  162. بیش از ۳۰ خود آموز عالی در زمینه حرکت و انیمیشن در جی کوئری | ايروني ها
  163. 18 Adet jQuery Menü Dersi Demo ve Download -Zingocan | jQuery - CSS Blog
  164. travel around world » 35 jQuery Animation Tutorials
  165. 37 Amazing Tutorials for jQuery Navigation Menus
  166. 36 Eye-Catching Jquery Navigation Menus - Nagpur City
  167. 30 Adet jQuery Animation Script(Tutorials) | ilkaymola.com
  168. Jquery13 is a place where designers and jquery developers can find very helpful plugins. » 40 Superb Jquery Navigation Menus
  169. 提升设计品质的8种布局方案 « 虫子落网记
  170. Sample CSS and Javascript | Sample Code
  171. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Online Tutorials For Designers
  172. 25 sexy jQuery Drop Down Multi Level Menu | King F1
  173. 25 Menu Espetaculares Com jQuery | Webmaster.pt - Marketocracia Digital
  174. 25 jQuery drop down menu Scripts | Vandelay Design Blog | Albanian News And Articles
  175. Scripts jQuery para crear menús desplegables en tu sitio
  176. 35+ Excellent CSS and jQuery-based Navigation Menu Tutorials and Techniques Collection | Blogger Bits
  177. Thatwebdesignguy » 25 jQuery Drop Down Menu Scripts
  178. 25 adet Kullanıcı Dostu jquery açılır menü uygulaması
  179. 36个引人注目JQuery导航菜单 » 布多的交互设计
  180. amazing jquery navigation menu tutorials | ExtraTuts
  181. 30+ Web下拉菜单-传播、沟通、分享-一直“有你”
  182. 25 Adet Kullanışlı jQuery Açılır Menü Uygulaması | Web Tasarımı
  183. 15+ Drop-Down Menu To Make your Website More Attractive | Design Dim
  184. Styling HTML Lists with CSS: Techniques and Resources | Ricardo JV Cruz
  185. 30 menus em CSS e jQuery gratuitos para seu site | ::adrianogianini - tutoriais, cursos e muito mais
  186. Navigation Menu dengan jQuery + Tutorial | Blog Personal Frenavit Putra
  187. 30多个Web下拉菜单 | 子曰博客
  188. Minimalist Web Design » 52 Best of the Best jQuery Navigation
  189. bagel cafe » jQueryを使ったクールなメニューの作り方 チュートリアル26選
  190. 20+ fresh jQuery Animation Tutorials | Free Resources for Designers & Developers
  191. Lista de plugins e templates jquery e css com demos e download »
  192. Raccolta di risorse gratuite jQuery per web designer e sviluppatori web.
  193. Top 20 jQuery CSS Drop Down Menus | webtrendset
  194. 100+ Excellent jQuery Plugins for Navigation and Menus | Stunning Mesh
  195. 15 Great jQuery Navigation | jQuery4u
  196. 36 Eye-Catching Jquery Navigation Menus | :: DesignZine ::
  197. 13 Excellent jQuery Animation Techniques
  198. 38个 css 和 jQuery 多级下拉菜单解决方案 | 高品质 HTML+CSS 制作服务 - SonicHTML
  199. Beautiful CSS and jQuery Drop down Menu Tutorials | WebsterBox - Web design Blog
  200. 32 jQuery and CSS Drop Down Menu Examples and Tutorial | TutorialChip
  201. 35 Excellent Jquery And CSS Drop Down Menu | jQuery-Tutorial
  202. 5 Professional jQuery Menus | 33Rockers
  203. 100+ 优秀的jQuery导航菜单插件/Navigation/Menus | 芦苇网-Lyove Box
  204. 25 Jquery уроков по улучшенную навигации
  205. 10 incredible JQuery navigation menus | Joko Susamto
  206. Excellent jQuery Navigation Menu Tutorials | Woupe Design Blog
  207. 10+jQuery Drop Down Menu  | Free Development Resources
  208. 36 Eye-Catching Jquery Navigation Menus | Code Album
  209. Super4desigN.com -Выпадающее меню CSS, JavaScript, JQuery
  210. jQuery tutorials to create Navigation Menu | LittleDime
  211. Jquery and Web Design Tutorials
  212. Drop-Down Menu Useful Scripts To Enhance Header Navigation | How It Easy (HIE) Computing community
  213. 37 Phenomenal jQuery Plugins and Demos for Developers
  214. Excellent jQuery CSS Animated Navigation Menu Tutorials - DesignModo
  215. 25 Top Free jQuery Navigations – Freebies – Web Design Cabin
  216. 13 Excellent jQuery Animation Techniques « Blog d'Artefakt
  217. Excellent jQuery CSS Animated Navigation Menu Tutorials | Online Music,Movie Entertainment Portal
  218. Amazing Jquery Examples with demo and jQuery source code | Upper Pages
  219. Drop-Down Menu: 30+ Useful Scripts To Enhance Header Navigation | Erman Aydemir / Blog
  220. 超过 30 款 下拉菜单脚本,改善你的导航菜单 | laura's site
  221. jQuery:款简单实用的CSS+JS下拉菜单脚本 | -牧童印象-交互设计 视觉设计 网页设计
  222. 42 jQuery Navigation based Techniques | palkistore
  223. 非常优秀的jQuery+CSS实现动态导航菜单教程 @ leo108's blog
  224. 38 jQuery And CSS Drop Down Multi Level Menu Solutions | kamranbhutto
  225. 55个 jQuery 动态效果资源 | 百锐网
  226. 32 jQuery and CSS Drop Down Menu Examples and Tutorial | Chinasb's Blog
  227. 13 Teknik Animasi JQuery yang Sangat Mengagumkan
  228. 55 Great jQuery Animation Resources
  229. 20 Efectos para jQuery basados en animaciones
  230. 36 Beautiful Jquery Navigation Menus | Pixel2Pixel Design - Pixel2Pixel Design
  231. 25 jQuery Tutorials for Improved Navigation Menus | Submit Links
  232. 25 jQuery Drop Down Menu Scripts | Vandelay Design Blog
  233. javascript和jQuery导航菜单教程 | 酷飞网志
  234. 10+ Excellent CSS and jQuery-based Navigation Menu Tutorials | Psdtuts
  235. jQuery Techniques for Web Designers @wezilesl | BLOG. wezile
  236. 20 Remakable jQuery Navigation Tutorials | WEBAXES
  237. Excellent jQuery Navigation Menu Tutorials | Desua the world of Knowledge
  238. jQuery and JavaScript Drop Down Menu Free Download | Graphicitvitis
  239. بیش از 30 سایت آموزش آنلاین جی کوئری | پرتال آموزشی آکسایا
  240. 15 excellent jQuery of navigation menu plugin
  241. jQueryとCSSで作るドロップダウンメニューのスクリプトまとめ | TOPICK(トピック)
  242. 25 Amazing CSS Navigations and JQuery Examples | Web Design Core
  243. Jquery Navigation Menus: 35+ Eye-Catching Jquery Navigation Menus |
  244. Herbeth Santana
  245. Sacima鲨鳍马工作室 » Blog Archive » 100 Great CSS Menu Tutorials
  246. 100 Great CSS Menu Tutorials
  247. 100 个强大的 CSS 制作菜单的教程 | 吉林SEO | 打造专业的吉林网站优化团队
  248. 25 Menus Espetaculares em Jquery : TudoFilme
  249. 10 Tutoriais de como criar um menu em jQuery - UGLYMAN
  250. 54 Drop Down menu tutorials for your Website
  251. 100 Great CSS Menu Tutorials - pocongseXy ::Art and Dezign::
  252. 30 CSS Menu Tutorials to Build Attractive Menus | Flash User
  253. 30个Jquery做Menu的插件 | 千文
  254. CSS导航栏/菜单教程 – 紫萝卜 | 所有与设计有关
  255. How To Improve Header Of Websites: Useful Stuff | DesDevWeb
  256. CSS导航栏/菜单教程 | logolomo
  257. Beautiful jQuery navigation menu example with demo and source code | codingquery.com
  258. 36 Eye-Catching Jquery Navigation Menus
  259. Animated Drop Down Menu with jQuery | arzrasel
  260. Html Css Jquery Javascript Based Super Powerful jQuery Navigation Menus and Menu Plugins Tutorials | Thenewsblock
  261. 40 Resources for Getting Started with jQuery Development
  262. 20+ BEAUTIFUL jQUERY AND CSS DROP DOWN MENUS

Leave a Reply