Sexy Drop Down Menu w/ jQuery & CSS
- By Editorial
- Posted in TUTORIAL
- 674 comments
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.
View Demo of Sexy Drop Down Menu
Step1. HTML
First create an unordered list for your base top navigation. Then simply nest another unordered list for your sub navigation.
<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href="#">Resources</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
Step2. CSS
Next, it’s time to style the navigation wireframe with CSS.
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}
Step3. jQuery
For those who are new to jQuery, you can learn about it here.
The following script contains comments explaining which jQuery actions are being performed.
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
*To degrade gracefully, we only show the drop down menu trigger to those who have javascript enabled.
This is what it looks like when javascript is disabled:
View Demo of Sexy Drop Down Menu
Conclusion
Note: I went ahead and added the rounded corners to the demo (CSS3 – Only supported in Firefox, Safar, & Chrome). If you would like to give it a try, check out this tutorial.
Experiment and customize this to fit your needs! If you have any questions, concerns, suggestions, or comments, please do not hesitate to let me know.
Heather, 02 June 2009
Very smooth, and looks easy to implement. I also like how it degrades nicely with javascript turned off.
Rafa Garcia, 03 June 2009
When i disable javascript in my browser, i see no spot of the submenus.
Apart of this, a great work.
insic, 03 June 2009
+1 its indeed awesome. nice work.
santosh, 25 November 2009
I saw insic’s comments on many other blogs.
she comments almost all post on all these blogs.
I don’t know how she got that much time to read all post.
May be this just a trick to get back link to her blog.
Derrick, 19 June 2009
Yes, with javascript turned off, you will not see the submenus, but the primary links still work.
Alice, 13 July 2011
I am having problems with this navigation.
1st. If I put the first text up to the edge of template by using # in the css then my content disappears.
2nd. The topnav has a invisible bar below it so it stops the content from going any higher.How to delete it?
3rd. The hover light image does not appear with the coding.
Basically,I’m using this navigation without the drop down for my site so it would look stylist and easy to use.
nanditha, 11 November 2009
Although i included the jquery.js file within the header, the triger doesnt load!! can anyone figure out wat the problem could be….
the following is the jquery.js file
$(document).ready(function(){
$(“ul.submenu”).parent().append(“”);
$(“ul.menu li span”).click(function() {
$(this).parent().find(“ul.submenu”).slideDown(‘fast’).show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(“ul.subnav”).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up
});
}).hover(function() {
$(this).addClass(“subhover”);
}, function(){
$(this).removeClass(“subhover”);
});
});
Vipin, 04 January 2010
$(”ul.submenu”).parent().append(“”);
span missing in the above line. it shoudl be
$(”ul.submenu”).parent().append(“span”);
cuz the menu gets activated on the click of the span.
i hope that solves the problem….
prashant, 11 January 2010
well said heather. Similar “sexy bookmark” like effect is nicely done without javascript. Have a look i really like this.. http://www.webdeveloperjuice.com/2009/12/15/sexy-bookmark-like-effect-using-pure-css/
yasser, 02 June 2009
Very nice :)
thanks ,
chris, 02 June 2009
I love the animation, but not so much the small arrow. Too easy to miss! Could you show a version with only rollovers?
Steven Snell, 02 June 2009
Very nice tutorial Soh. Thanks.
Egydes, 02 June 2009
I love It :) thanks for sharing
Alan Moore, 02 June 2009
Would it not be better to have some CSS allow the drop downs to appear when the menu item is hovered over, but then have jQuery add the neat animations if JS is turned on?
Nonetheless, very impressive looking.
required? whatever, 02 June 2009
waaay easier and more elegant done in Flash(TM)
Lets see iQuery and CSS do easing
rich, 02 June 2009
Flash is stupid. Enjoy paying for your proprietary runtime!
scifisi, 23 October 2009
Actually the Flash plugin for all browsers is – and has always been – free.
There is also a Flash SDK, which is free and also Flash Develop which again is completely free.
Enjoy being ignorant.
If Flash is installed and enabled use it. If JavaScript is enabled – use it!
Michael, 19 November 2009
Search engines will not spider your navigation link structure. Flash eats up the processing power of the cpu. You need a plugin. You would be required to check for plugin, then deliver a second menu if they don’t have the plugin. Now you’ve got two sets of data and code. There are z-index issues with flash, the nav showing up on top of modal windows etc… There are popups to update your plugin if it is out of date. These are just a few reasons flash as navigation are a user experience nightmare. I’ll also point out that no top tier web site uses flash for their navigation, not even Adobe on its flash plugin pages.
James, 15 January 2010
Spiders don’t only look at your navigation link structure. Make a proper site map and you side step that whole issue.
Unless your target audience are all cheap bastards and all bought their computers in the 90s, a flash menu will not eat up much processing power of a cpu at any noticeable level.
Providing a second menu is no more of a hassle than whats in the above tutorial. Take the menu and link to a pages with the rest of the links.
There are no z-index issues with flash. There are programmer issues with programmers not knowing how to properly use the z-index.
If your browser is out of date, and with your cpu comment it is safe to assume your entire computer is out of date, the script above won’t work anyway as older browsers have serious issues with jquery. Hows that for a popup for being out of date?
Your comment about the top tier websites not using a flash menu is irrelevant because top tier sites are not about looking artistic and flashy, they are about being simple, straight forward and working.
The reason Adobe doesn’t use it is because of common sense. It would be a catch 22 if in order to get a plugin, you have to have the plugin.
Firefly, 02 June 2009
jQuery does do easing…
David, 17 December 2009
just wondering .. how is easing possible in jQuery. As I understand it, easing if you e.g. do a fade then you can make it fade slower toward the end of the fade. I would love it if this were possible in Jquery .. but I don’t think this is possible.
David, 17 December 2009
Never mind .. anything is possible .. just found the following link: http://gsgd.co.uk/sandbox/jquery/easing/
Miroslav, 19 January 2010
David, I’m Flash developer since 2002. and I have been in web business since 1997.
When you say “how is easing possible in jQuery” you don’t understand AS and JS at all. AS is based on ECMAScript like JS and easing in Flash was able in version AS1, so sure it is possible in JS!
In my opinion it is stupid to use Flash menus in HTML based sites (it always was). On other side, people, give Flash more respect while talking about it, because Flash deserves it. Most ideas and effects done by jQuery come from Flash world (see credits on http://gsgd.co.uk/sandbox/jquery/easing/). I’m very happy that I don’t need Flash to make nice effects on my HTML sites. But, if I’m working some presentation site, or reach multimedia site with games and lot of interactivity, I use Flash and jQuery will never change that.
Dave, 02 June 2009
Nice tut, thaks a lot
Markus, 08 June 2009
Using a proprietary, non-accessible, non-indexable plugin for your main menu is just plain old stupid, sir!
Also: jquery.easing.js
Mordy, 23 December 2009
Does anyone still use flash?
Sean, 02 June 2009
When Javascript is turned off, the sub-navigation isn’t available to users with CSS.
This would be easily attainable by adding a class, styling for hover, and then removing the class with Javascript.
ul.hover li:hover ul.subnav { display:block; }
$(‘ul.hover’).removeClass(‘hover’);
Now, with only CSS, the menus drop down when we hover over a link. And if Javascript is enabled, we remove the class, so hover doesn’t mess up our new effect. And we allow an animated, clickable effect instead.
montana flynn, 02 June 2009
Great idea and suggestion! I am going to write about using javascript unobtrusively if your interested in helping drop me a line through my blog!
Mariusz, 02 June 2009
li:hover will not work in IE6.
Sean, 03 June 2009
That doesn’t bother me so much. But you can easily add the hover behavior htc file in an IE6 stylesheet.
Issa Qandil, 02 June 2009
looks wonderful, thx for sharing
argie, 02 June 2009
looks nice but the fact that you’re supposed to click on the drop down arrow is very unintuitive. perhaps just have the drop down appear on hover?
Adam, 01 November 2009
argie, instead of
$(“ul.topnav li span”).click(function()
Just change it to
$(“ul.topnav li span”).mouseover(function()
Problem solved for intuitiveness.
The only thing I dont like is that the drop down doesn’t come on when you hover over the menu item itself, but rather the little arrow.
Ron, 02 January 2010
thanks adam
web develop, 02 June 2009
wickedness. Love the drop down. Very clean and fluid.
Eric Roberts, 02 June 2009
Also, you could add the tags to the parent item with jQuery, instead of leaving it blank in the HTML.
Good tutorial!
Alex Garcia, 02 June 2009
There should be a timeout for the mouseout event of the menu… It’s too easy to mouse past the last item of the menu, which results in the menu closing too early.
But otherwise, it looks nice and seems to degrade well.
Eric, 02 June 2009
Love it!
anon, 02 June 2009
.. Fails without using a mouse. You can’t tab through the subnavigation!
Dragonica, 02 June 2009
Hmmm, looks interesting. I might use this for my new site. What about multi level menu with subcategories and stuff?
Erik Stark, 07 January 2010
I was curious if anyone has tried making this a multi-tiered navigation with subcategories and such. I’ve been recently trying to do this, and any help would be great.
Kai, 12 January 2010
Yeah, I made a subcat menu pretty easily with only minor modification. Problem is, IE does not display them correctly, but whatever. Still on it and I don’t care about IE anyhow.
Just add ul class=”subsubnav” or something, then duplicate the css and jquery functions for subnav actions and it’s good to go.
You’d have to modify the subsubnav css to z-index to the left or right with positive or negative left margining.
I don’t know why the append span thing is in the jquery code. it makes much more sense to just do this:
$(“ul.topnav li a”).hover(function() { …
and have it drop the menu down when someone hovers over the link attached to the menu.
Plus, ditch all of the background images and such that are all over the css for this thing. totally unnecessary.
As for the disabled javascript and all that, just put normal navigation in a parent id div and have js write the new jquery nav in on page load. If js is disabled, the call to the navigation rewrite will not happen and you’ll have a normal nav for those users. No harm on search engine spidering. transparent to the user. everyone wins.
I also wanted to comment on people complaining about flash vs jquery, google indexing and all that jazz. Calm down people. Use flash if you want to. Use jquery if you want to. Detect the bots to feed flash alternatives if you put critical navigation stuff in flash… or submit a sitemap xml page to the search engines.
No, you won’t be banned or docked from search results if you toggle navigation between flash and html for bots.
The argument on resources or cpu needed for either is so minuscule you’d have to be running youtube or facebook for those things to compound to a serious level, and if you were running those sites, you probably wouldn’t be googling jquery dropdowns as a code source or need reminding on technical issues like that.
This menu provided here is pretty useful. Could be more complete, but anyone that’s ever touched jquery, html and css will know how to expand it to their needs.
Thanks for posting it.
Matt, 14 July 2011
Kai can you post your code for the subcat menu? i’m having trouble implementing it… any luck on making it compatible with IE?
i can get the subcat menu to show but it shows when i mouseover any subitem. i want it to show only when there IS a subcat item associated to the submenu item they are hovering over.
Joel, 02 June 2009
Use outline:none; on your links, it will give the menu a bit cleaner look.
Joost Kiens, 02 June 2009
Yeah it looks nicer, but it also takes away any visual clue for people navigating with the keyboard.
justintime, 04 November 2009
that and not to mention IT IS visually misleading that you really have to ‘aim’ for the arrow for the dropdown.
3.2 out of 5
d00d, 02 June 2009
a:focus{outline:none} will get rid of those annoying outlines the browser creates around clicked links.
d00d, 02 June 2009
Woah. Beaten to the punch.
Eric, 02 June 2009
Doesn’t work if JavaScripts isn’t enabled in the client. I’m all for cool menus, but first and foremost it needs to work in all use cases.
E
Mariusz, 02 June 2009
I think there’s no working cross-browser dropdown menu that works without Javascript (even ye olde :hover version requires some JS to work in deprecated browsers like IE6). To make it ugly, but working in non-JS browsers, simply go for $(‘ul subnav’).hide(); on display:block’ed subnav which will not hide it in non-JS browsers.
Jake, 17 October 2009
Actually Stu Nicholls has built dozens that work across the board, css only, accessible, and work fine in IE.
saurabh shah, 02 June 2009
nice and simple to use … very handy … thnx for sharing ..
Mariusz, 02 June 2009
Using things like that: $(“ul.subnav”).parent().append(“”); should make you fall underground from shame, really. :^)
Enumerate children, append anchor leading to #subnav-{child_number} – voila, nice and semantic.
shin, 02 June 2009
It works with IE6 as well.
It might be a good idea to have hover function rather than click function on the arrows.
Some may not notice it is clickable, and visitors are used to a css dropdown menu which comes down when they hover over it.
Ariyo, 02 June 2009
Awesome effect. I love it.
Jamie Allsop, 03 June 2009
This is some really nice navigation and I like that it degrades nicely. I was thinking the same as @shin, instead of having to click on the arrow for it to drop down you just hover over it, although I do like the fact you have to click on the arrow for it to drop down I don’t think users will find it that user friendly.
Milos, 03 June 2009
very nice… thanks
Fausto, 03 June 2009
Nice navigation, thanks for share.
Steve Mulder, 03 June 2009
Doesn’t work in Opera
Adam, 01 November 2009
Who cares.
99.999% of the world doesn’t live in Sweden.
Matthew Johnson, 03 June 2009
Awesome tutorial, this is a great nav example! Nice work. :D
Ray Gulick, 03 June 2009
While I really like this, I was thrown off at first by the way it operates, which requires a click on a pretty small target area to activate the dropdown. This is so different from the expected behavior (dropdown activated by hovering over the nav item) that I thought it was broken at first. I suspect most web users would not stick around long enough to figure it out.
Mark Luker, 03 June 2009
My thoughts exactly. I’ll be sure to change this behavior when I use this code on my next project ;)
Maverick, 03 June 2009
wow, a very nice looking menu. but function-wise i feel the drop down menu should open on OnMouseover instead of OnClick as users expect drop down menus to open up on hovering over the arrow.
other than that, very nice work.
Dario Gutierrez, 03 June 2009
Looks great, I like the smooth animation. Thanks for share.
w1sh, 03 June 2009
It’s about time someone posted this much needed tutorial. Please, more tutorials on interface effects that are actually used.
Soh Tanaka, 03 June 2009
Hey girls/guys,
thank you all for your feedback and constructive criticism~
I was actually trying to emulate the http://www.digg.com drop down menu (where you click on the arrow to the side of the nav link), but with my own twist~
The main point that I now have to agree with is the click vs hover option, which I do agree this may be a usability issue.
Solution:
http://www.sohtanaka.com/web-design/examples/drop-down-menu/hover.htm
The code I change is below:
$(this).parent().find(“ul.subnav”).stop().slideDown(‘fast’).show(‘slow’, function(){
$(this).height(“auto”);
});
For those who are asking why this is not working w/out javascript, CSS does not allow any sort of animation and it also has issues with older browser like IE6 (li:hover does not work in older browsers). I used jQuery to overcome these issues, and for it to work in all major browsers (Firefox, IE6-8, Opera, Chrome, Safari).
I did how ever have mentioned that those who have js disabled, will be still able to cruise the navigation without a problem (w/out the sub nav). Please see notes above~
I also do not recommend doing this flash (for the comments above). If the user does not have a flash player or the latest version, they would miss your main nav, and on top of that search engines will pass right over them as well.
Thanks again for this opportunity Noura, and learning experience by the great comments from readers!
Noupe, 03 June 2009
Thanks Soh for this great tutorial. We would love to see more tutorials having such elegant and stylish effect from you :)
Magdy, 22 June 2009
I do agree with you, This tutorial is absolutely useful and it was pretty much neat, organized, and easy to understand.
Thanks Soh for this tutorial, and thanks to Noupe for giving us that chance to see such interesting tutorials.
cheers =]
ncj, 03 June 2009
I like these however, I would like to see the dropdown triggered on the link and not beside the link and I do believe the dropdowns need to be keyboard accessible.
I don’t agree with whitehouse.gov’s solution to the same problem (I have no idea what technology they are using) by repeating all the links at the bottom of the page.
honour chick, 03 June 2009
excellent tutorial…thanks for sharing this ;)
Janko, 03 June 2009
Very nice tutorial, good work, Soh!
DDamir, 03 June 2009
Nice.Thank you.
agilius, 04 June 2009
Great example of Jquery usage. I enjoyed it and I see that it works well even though you click the arrow, then hover-out, then click fast again the arrow and so on.
Thanks, keep em coming!
Selvam, 04 June 2009
jquery nicely used…..awesome dropdown
Greg, 06 June 2009
What a great nav system! So simple to implement. I modified it slightly to allow the sub-nav to open up on mouse over rather than click. To do this just change
$(“ul.topnav li span”).click(function()
to
$(“ul.topnav li span”).mouseover(function()
Brilliant! Thanks very much.
colin, 06 June 2009
Really love this, but is there any fixes for opera i’ve been bustin my nuts tryin to work it out
cheers, keep up the good work
Archetoy, 07 June 2009
soooo nice Soh. The “hover” implementation variation is fantastic, and really intuitive.
Joseph Smith, 07 June 2009
Yea, it’s really so very intuitive indeed. And creative!!
Dream Meanings, 08 June 2009
The css drop down menu was pretty hot. Seems pretty easy to implement too once you have the jquery code included, then it is just a matter of editing html lists.
Web developer, 08 June 2009
A bit slow for me … other than that ist very nice.
Benjamin Reid, 09 June 2009
Nice TUT, but as a few people have set, the dropdown needs to function when you click on the full button not just the arrow. From a UI point of view, it’s best just to add category page into the dropdown.
Neil, 09 June 2009
That is annoying!
shevaa, 09 June 2009
Wow… Nice Drop Down…. Nice Share…
Thomas, 10 June 2009
I can’t see his demo. Im using Safari 4 and javascript is enabled.
Alex, 10 June 2009
Useless to me (and probably alot of other people) unless this supports a 3 or 4 multi-tier drop down list.
Which right now, I don’t see this doing….
Ty (the Web Guy), 10 June 2009
“Studies show that top navigations tend to get the most visual attention when a user first visits a site.”
I completely agree, but anyone have links to studies with this conclusion? I’m working on a project that can really use this kind of supporting documentation.
Ashish, 12 June 2009
Very nice but two thing should be added to this:
1. It should work on click of menu text also
not only on arrow.
2. Where is the 2nd step?
Babu, 12 June 2009
Can I use this dropdown commercially?
robb, 13 June 2009
loved this !!
Jaspal Singh, 15 June 2009
very nice menu.
tom, 16 June 2009
If I have a image below this menu.. is the drop down menu going to push the image down.. or is it going to overlap the image?
library book, 17 June 2009
Very nice menu. Good job
Robert T, 17 June 2009
Whoa, I didn’t even figure out how to use until I read more. It thought it was broken. I expected this to work with the cursor hovering over the button text. The fact I had to first focus on the little arrow and second, actually click on it, was very unintuitive to me.
David L, 17 June 2009
It’s so frustrating that something as slick and stylish presents problems from a usability aspect – form should always follow function. I would have rather the author focus on making the text the active trigger, and not worry about the mouseover on the arrow. It’s a pity, and the only reason I won’t be using it for a project I have on at the moment. Fingers X’d for an update!
Hoi, 18 June 2009
Great menu! I have one question about using jquery tabs near the menu, however. When I click on the menu the dropdown box hides behind my jquery tabs. Do you know why that may be?
Thanks!
Jasmin Halki?, 18 June 2009
Very nice. Thank you!
Peter, 18 June 2009
I use the following modification to support drop down
while just clicking on the text. Someone more knowledgeable should have a look if it can be done better. You can have both ways by just adding this code to the existing.
// modified to work on click of top item
$(document).ready(function(){
$(“ul.topnav”).parent().append(“”); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$(“ul.topnav li”).click(function() { //When trigger is clicked…
//Following events are applied to the subnav itself (moving subnav up and down)
// $(this).parent().find(“ul.subnav”).slideDown(‘fast’).show(); //Drop down the subnav on click
$(this).find(“ul.subnav”).stop().slideDown(‘fast’).show(‘slow’, function(){
$(this).height(“auto”);
});
$(this).hover(function() {
}, function(){
$(this).find(“ul.subnav”).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(“subhover”); //On hover over, add class “subhover”
}, function(){ //On Hover Out
$(this).removeClass(“subhover”); //On hover out, remove class “subhover”
});
});
web media, 18 June 2009
Hi, we are trying this script and create a custom style. Only issue remaining is IE6 will not cooperate. I hope IE6 will leave our lives very soon. Thanks for the tutorial, well done ;o)
Josh, 19 June 2009
Is there a download link for all of this? Images mainly, i can see the jquery and html example in the source. But i may just be missing something.
Anyone?
Thanks in advance :)
Vipul Limbachiya, 19 June 2009
This is really awesome!! thanks for sharing :)
nainpreet, 20 June 2009
Nice article. It would be even nicer if you provide the background images for download. It will help rookies like me to completely imitate what you have taught in this article.
Hello_electro, 21 June 2009
First off: this scripts is terrific!
but off course, i am facing a programming woe!
so for some reason, the code works fine in MSIE (believe it or not!) but in Firefox the drop down image will not show. I noticed that in the section of the script where:
$(“ul.subnav”).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav
it will work fine in MSIE and not FF. HOWEVER if I change:
(“”);
to:
(“<span></span>”)
the code works in FF and not MSIE. in MSIE it will leave out the drop down image but make a huge gap between the level one navigation items where the image should be.
Anyone have an idea why this is happening or why MSIE or FF is interpreting this differently? oR does anyone have a workaround with the code?
Here is the full code. Keep in mind the css is unchanged (havnt got to formatting for site yet)and i am using the latest jquery. one other weird thing. i noticed that if i look at the source code from my site the (“”); is showing up as color coded. but on the demo page it is not. i am using SilverStripe CMS if that helps too. :
Home
Tutorials
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Resources
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
About Us
Advertise
Submit
Contact Us
$(document).ready(function(){
$(“ul.subnav”).parent().append(“<span></span>”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav
$(“ul.topnav li span”).click(function() { //When trigger is clicked…
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(“ul.subnav”).slideDown(‘fast’).show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(“ul.subnav”).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(“subhover”); //On hover over, add class “subhover”
}, function(){ //On Hover Out
$(this).removeClass(“subhover”); //On hover out, remove class “subhover”
});
});
THANK YOU FOR ANY HELP!!!!
Hello_electro, 21 June 2009
ok, so i just realized the posting actually read the html! The issue is with using span in jquery. when using Character Entities for it shows up fine in FF. in IE it includes the span as text in the browser.
Hello_electro, 21 June 2009
So if anyone understood what my problem was and is having the same issue (sorry, i know i was terrible at explaining the problem) the solution was pretty simple:
instead of writing the code directly in the html page, create a javascript file and call it from within the page. I think it may have something to do with using a CMS, but not sure.
Gusto, 24 June 2009
How can i change the height of the submenu?
Alicia, 28 June 2009
This is pretty awesome. I’ll be using it alot!
Thanks!
karthik, 14 July 2011
you are super……..
Nick, 03 July 2009
Hi,
How does one retain the hover state on the topnav as one browses on the subnav?
Thanks.
Nick
Abhishek Dilliwal, 03 July 2009
very nicely explained thanks… :)
Website Designer Katy, TX, 05 July 2009
I was looking for a menu like this. Nice work!
Richard Sweet, 07 July 2009
Excelent, really useful. I just changed it slightly so the menus drop when you roll over the actual link, not when you click the down arrows.
efi, 23 July 2011
How??? Please let me know!
adrian, 08 July 2009
Hi all,
i m newbie to this…
having a blank page when tried to create the drop down menu…
below are the codes where i created as .html
DropDownMenu.js = Step 3
DropDownMenu.css = step 2
anything that i miss out??
Home
Tutorials
Sub Nav Link
Sub Nav Link
Resources
Sub Nav Link
Sub Nav Link
About Us
Advertise
Submit
Contact Us
adrian, 08 July 2009
oops,
here are the codes:-
//
//
//
//
//
//
//
// Home
//
// Tutorials
//
// Sub Nav Link
// Sub Nav Link
//
//
//
// Resources
//
// Sub Nav Link
// Sub Nav Link
//
//
// About Us
// Advertise
// Submit
// Contact Us
//
//
//
Pradeesh, 09 July 2009
Please give me the link to download this
drifter, 09 July 2009
Hi
This is great!
I don’t know much about this kinda thing, but I use Joomla! CMS so. Since it loads MooTools by default it will need to be converted to work with that instead of JQuery. I’m sure it will be small changes to the JS file only. Does anyone have an idea how?
dM
Angel, 10 July 2009
Hello, this is a great menu….but how I am not pleased with the way this looks if you add another set of links under a subnav link. Is there a way to get rid of the bullets and the spacing between each one that makes it look pretty awful?
for example this is what I have:
Home
A
A1
1
a
b
2
A2
B
Sub Nav Link
Sub Nav Link
C
D
E
Contact Us
JayDee, 16 July 2009
This menu was extremely easy and quick to implement.
Thanks for putting this up. To add to nick’s point above, it would be nice to retain the hover state on the top navigation items while over the drop menus…
Great stuff though. Thanks!
Andrew, 17 July 2009
Hi are we allowed to have use this menu?
I have it on my site working great but just wanted to know if we are allowed to use it.
And thanks best menu out there in my opinon.
Stephen, 17 July 2009
Fantastic and simple menu! Thanks for this.
I am having a problem, though, using it with my current project. Unfortunately, I am forced to use MochiKit alongside jQuery on the current site I’m working on. So, I am using jQuery’s noConflict feature and MochiKit’s DOM like so:
jQuery._$ = MochiKit.DOM.getElement;
var $j = jQuery.noConflict();
My problem is that the menu works in IE, but not in Firefox (weird since it’s usually the other way around). Firefox won’t display the dropdowns at all.
Any tips on how to get it to work properly in Firefox, too? I would think that such simple code shouldn’t have a problem, but clearly there is some sort of issue.
I you probably don’t have any experience in using MochiKit and jQuery together (because normally you wouldn’t need to do that), but any suggestions would be greatly appreciated.
Thanks!
Stephen, 17 July 2009
Okay, I know now that it’s not an issue with MochiKit and jQuery working together. Must be some sort of CSS issue, then. My CSS file is pretty big, so it’s probably going to take me a while to figure this out. :(
Stephen, 18 July 2009
Fixed it. It was just a property in the CSS file that was conflicting. All is good. Thanks again for this great menu code!
Search Scripts, 24 July 2009
Very Nice Drop Down Menu!
Mike McAlister, 13 October 2009
This is a fantastic little piece of script. Just having one hangup here. Probably from my excessive customizing, but I thought I’d ask anyway in case someone has experienced the same issue.
http://sixonefivedesign.com/cleancut/
In IE6 and IE7, the menu drops fine but once you start to hover over the sub-items, the menu dies and scrolls back up. I’ve tried nearly everything I could think of, now I’m left scratching my head!
Any help would be appreciated!
zack, 15 October 2009
Hi,
Where we can download the images that are used in this example?
Regards
Zack
Gustavs, 17 October 2009
Interesting, but seems a bit un-user-friendly.
gmail, 17 October 2009
Gracias!! exelente sitio
Imran Ahmad Jan, 18 October 2009
Thanks for such a step by step tutorial. I am new to jQuery. Just also mention to create file how and where, so that who did’nt used css and jQuery ever how and where they will ceate how many files, seperate or one etc. Any how i sort it out but for others like. Thank u very much sirrr again. . .
ales, 23 October 2009
i like this drop down menu a lot. I was trying to implement it to my website.
The only issue I face is how to get dropdown menu shown in front of cufon h1 and h2 tags (i use http://wiki.github.com/sorccu/cufon).
So when drop down menu opens and shows menu items, cufun item is showned in front and menu itmes are hidden behind.
I’ll be happy to get some tips to solve this.
novice, 23 October 2009
hi!
i tried your tutorial and implimented in my website. it is working properly. But, below the menu, i inserted a carousel. my problem is that, the carousel is in the top layer and the menu (specifically, submenus) when it is animating, maximum part of it is hidden below the carousel. i tried z-index in several divs, but no success.
plz help.
thank you
Mike, 26 October 2009
Thanks for the tutorial. Will definitely play around with what you got here! Nice work!
Zain Shaikh, 28 October 2009
wow, its really cool, but it is not 508 compliant, it does not work when Jaws is reading the link :(
Duane, 29 October 2009
Thanks for this… really nice work!
Mike, 31 October 2009
Beautiful Work. When I hover over the menu the submenu goes below my form. Can somebody please tell me how to fix it.
Mike
SWP, 01 November 2009
Nice tutorial, I can wait to try this out.
kamal, 02 November 2009
very nice tutorial…
this gonna work on my project :]
thanks for sharing this tutorial
Kris, 03 November 2009
The dropdowns go behind a SWF file on any Windows browser. Any idea on how to make it stay on top of the SWF? Z-index doesn’t appear to be working.
HeartDisk, 04 November 2009
Awesome Menu i love it
keep sharing