Sexy Drop Down Menu w/ jQuery & CSS
- Posted in TUTORIAL
- 362 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.
Very smooth, and looks easy to implement. I also like how it degrades nicely with javascript turned off.
When i disable javascript in my browser, i see no spot of the submenus.
Apart of this, a great work.
+1 its indeed awesome. nice work.
nice face ^_^
ugly face ^_^
@charbel. you don’t have face ^_^
Nice tuto.. and good luck ^^
I’dont have face too +_+
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.
i just wanted tell you are so beautiful
pretty!
Yes, with javascript turned off, you will not see the submenus, but the primary links still work.
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”);
});
});
$(”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….
nothing
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/
Very nice :)
thanks ,
I love the animation, but not so much the small arrow. Too easy to miss! Could you show a version with only rollovers?
Very nice tutorial Soh. Thanks.
nice dd menu, thanks for the tut..
I love It :) thanks for sharing
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.
waaay easier and more elegant done in Flash(TM)
Lets see iQuery and CSS do easing
Flash is stupid. Enjoy paying for your proprietary runtime!
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!
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.
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.
jQuery does do easing…
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.
Never mind .. anything is possible .. just found the following link: http://gsgd.co.uk/sandbox/jquery/easing/
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.
Nice tut, thaks a lot
Using a proprietary, non-accessible, non-indexable plugin for your main menu is just plain old stupid, sir!
Also: jquery.easing.js
Does anyone still use flash?
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.
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!
li:hover will not work in IE6.
That doesn’t bother me so much. But you can easily add the hover behavior htc file in an IE6 stylesheet.
looks wonderful, thx for sharing
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?
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.
thanks adam
wickedness. Love the drop down. Very clean and fluid.
Also, you could add the tags to the parent item with jQuery, instead of leaving it blank in the HTML.
Good tutorial!
I agree with argie… great but a bit unintuitive.
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.
Love it!
.. Fails without using a mouse. You can’t tab through the subnavigation!
:P
Hmmm, looks interesting. I might use this for my new site. What about multi level menu with subcategories and stuff?
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.
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.
Use outline:none; on your links, it will give the menu a bit cleaner look.
Yeah it looks nicer, but it also takes away any visual clue for people navigating with the keyboard.
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
a:focus{outline:none} will get rid of those annoying outlines the browser creates around clicked links.
Woah. Beaten to the punch.
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
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.
Actually Stu Nicholls has built dozens that work across the board, css only, accessible, and work fine in IE.
nice and simple to use … very handy … thnx for sharing ..
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.
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.
Awesome effect. I love it.
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.
very nice… thanks
Nice navigation, thanks for share.
Doesn’t work in Opera
Who cares.
99.999% of the world doesn’t live in Sweden.
Opera is norwegian.
Awesome tutorial, this is a great nav example! Nice work. :D
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.
My thoughts exactly. I’ll be sure to change this behavior when I use this code on my next project ;)
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.
Looks great, I like the smooth animation. Thanks for share.
It’s about time someone posted this much needed tutorial. Please, more tutorials on interface effects that are actually used.
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!
Thanks Soh for this great tutorial. We would love to see more tutorials having such elegant and stylish effect from you :)
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 =]
window.open(’www.google.com.sg’)>
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.
excellent tutorial…thanks for sharing this ;)
Very nice tutorial, good work, Soh!
COOOOOOOOOOOOOOOOOOOOL!!!!!
Nice.Thank you.
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!
jquery nicely used…..awesome dropdown
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.
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
soooo nice Soh. The “hover” implementation variation is fantastic, and really intuitive.
Yea, it’s really so very intuitive indeed. And creative!!
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.
A bit slow for me … other than that ist very nice.
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.
That is annoying!
Wow… Nice Drop Down…. Nice Share…
nice..
I can’t see his demo. Im using Safari 4 and javascript is enabled.
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….
“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.
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?
Can I use this dropdown commercially?
Beautiful !!!
loved this !!
very nice menu.
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?
Very nice menu. Good job
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.
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!
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!
Very nice. Thank you!
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”
});
});
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)
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 :)
This is really awesome!! thanks for sharing :)
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.
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!!!!
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.
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.
How can i change the height of the submenu?
This is pretty awesome. I’ll be using it alot!
Thanks!
Hi,
How does one retain the hover state on the topnav as one browses on the subnav?
Thanks.
Nick
very nicely explained thanks… :)
I was looking for a menu like this. Nice work!
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.
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
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
//
//
//
Simply beautiful… beautifully simple!
Please give me the link to download this
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
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
fuck, the menu doesnt work
chk and mail me back
nice menu… :-bd
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!
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.
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!
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. :(
Fixed it. It was just a property in the CSS file that was conflicting. All is good. Thanks again for this great menu code!
Very Nice Drop Down Menu!
Thanks for best menu out there in my opinon.
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!
Hi,
Where we can download the images that are used in this example?
Regards
Zack
Interesting, but seems a bit un-user-friendly.
Gracias!! exelente sitio
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. . .
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.
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
Thanks for the tutorial. Will definitely play around with what you got here! Nice work!
wow, its really cool, but it is not 508 compliant, it does not work when Jaws is reading the link :(
Its pretty good i like it
Thanks for this… really nice work!
Useless without download link
Beautiful Work. When I hover over the menu the submenu goes below my form. Can somebody please tell me how to fix it.
Mike
Nice tutorial, I can wait to try this out.
very nice tutorial…
this gonna work on my project :]
thanks for sharing this tutorial
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.
Awesome Menu i love it
keep sharing
Awesome!
Is it possible to show the ‘ARROW’ selected when ‘TUTORIAL’ is clicked and we are on ‘TUTORIAL’ page?
Very Helpful.
definitely I will use for my website designs…
Thanks u so much..
awesome tutorial !
For those of us who don’t know…where are we putting the jQuery stuff? does it go in its own document with a pointer in the heade of the other document or what?
Brilliant – for designers and front end dev this stuff helps a lot – thanks
very nice…
yeah, really sexy :) I like it very much..
simple and nice…I used it
Thanks,
Thanks, this is great!
nice tutorial. thanks for share it friend
Very useful. I’m gonna use this for my clients’ website for sure.
Great tut, very nifty.
But I encounter a difficulty in IE7.
I enclosed the menu (need to restyle it still) in a div container with no height cause that differs per page. The CSS ‘overflow:hidden’ param cannot be used otherwise if one of my dropdowns is longer then my container div it will be cut of at the bottom of the container, for some reason.
So dropping the ‘overflow’ param did the trick for FF, Chrome & safari, but offcourse not in IE7.
It doesn’t matter which modification i tried in the CSS
in IE7 it still cuts off the dropdownmenu.
example: http://213.144.240.197/wifac/index.asp
Is this a bug in the jquery and CSS compliant source for the same reason rounded corners don’t work? Or can this be solved with CSS markup
Any suggestions? Please let me know.
Thnx
This is poor user experience. Navigation is one of the most important areas of a home page. Would you leave it to user guesswork as to choose the little arrow for all your sub navigation? The top nav text and the arrow and the whole button state should do the same thing> expose the sub navigation.
Has anybody been able to get this to work with the actual button rather than just the arrow??
Ok people, I just figured out how to append the function “hover” to the text button and got rid of the empty span tag for the trigger. (At least this works for me!)
$(”ul.subnav”).parent().append(”"); //Remove the “span tags”
$(”ul.topnav li”).mouseover(function() { //add a.trigger to the end like: ul.topnav li a.trigger
Then all you have to do is add the class “trigger” to the main navigation button you want to have a dropdown for like this:
Tutorials
This works perfectly for me in Firefox 3.5 & Safari 4 on a mac. Haven’t tested yet in IE, but worked fine prior to adding this code so I can’t image it not working in IE.
I don’t know why my response just got screwed up
the link should read:
Tutorials
wtf……
[a href="#" class="trigger"|Tutorials|/a]
blah
thank you!
Is it me, or is this still not working on Firefox 3.5.6 on MacOSX 10.5.6 (Leopard) ? Not drops down, not even when clicking on it.
Is it me, or is this still not working on Firefox 3.5.6 on MacOSX 10.5.6 (Leopard) ? Nothing drops down, not even when clicking on it.
(you’re not deleting this comment are you?)
Hello, I love your navigation that you made! I used it on my static website, but I am converting it to the Joomla CMS. I was wondering if you would know how to adapt this navigation to work as my main navigation for my Joomla site. In case it helps to see my Joomla site it is under construction at: http://www.roche-inc.com/Joomla/
Thanks ahead of time for any help you can give me,
Key
I would image if its anything like drupal & wordpress, you would have to hand-code it into your theme. And make sure all of the css makes it into your style sheet for that theme. Joomla from I hear is a tougher CMS to theme. Good luck.
Yea, it seems to be difficult to theme, it makes it even more difficult that to do any kind of advanced theming, you have to know PHP, which I don’t at the moment. I took the drop down menu that was provided with one of the themes you get with Joomla and took the images from this drop down to give it somewhat the same look. It isn’t exactly the same, but it has the glowing hover, but not the drop down arrow and effects like this one. I am currently working on learning PHP to try and do a better job of creating my theme.
Thanks for the reply,
Key
Simple Amazing and beautiful simple as that.
Hi,
this is a great menu, but I have a problem with it.
I created Home and Clothing, clothing has submenu to itself, with two links, 1)football, 2)basketball
but when I click on either of the sublinks, the top level menu with the arrow does not appear next to Clothing.
I did everything as the tutorial says, but still nothing.
hi,
I have a CSS menu positioned on my page directly below this jquery menu; when the jquery expands the menu items and i scroll down the menu i see the CSS links behind it and they are activated when hovered over – is there a way i can bring the jquery menu to the front and overylay my CSS.
Thanks and rgds
Marc
I have had a similar problem before with some menus, What worked for me was applying a z-index of 100 (or more if the menu you want it above is a z-index of more than 100) to the dropdown li’s (in the css). That should work. Good Luck!
That’s Hot!!! I live jquery even more!
This menu is awesome. Simple, sleek, and elegant and it works in IE! Thank you!
Nice, thanks for sharing
idiot make a download available for that
gud work guyz
Rally Nice Job!!!
If I open Resource menu and then move the mouse down, the Tutorials menu opens and then they both slide closed. Sometimes they’ll then open and close randomly. Similarily, if I open the Tutorials menu and move the mouse outside, the Resource menu opens and then they both open. It works when I view your page, but not mine. Any ideas?
Looks like it’s incompatible with NestedSortables (http://code.google.com/p/nestedsortables/). Or vice versa. :)
Ok guys here’s what I’ve come up with
This should trigger the drop down on a TEXT LINK mouseover…using this on a current project. Seems to work find but I’ve only tried in firefox
$(”ul.subnav”).parent().append(”"); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav
$(”ul.topnav li a”).hover(function() { //When trigger is clicked…
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(”ul.subnav”).stop().slideDown(’fast’).show(’slow’, function(){
$(this).height(”auto”);
}); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(”ul.subnav”).stop().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”
});
Thanks you saved my life
Amazing, truly a breath of fresh air, keep up the innovations.
Very nice! I like the transition effect on the submenu not really seen this around much on navigations
Can You upload zip archive? Please!!
Hi fulks
I have seen this link http://www.sohtanaka.com/web-design/examples/drop-down-menu/
but there is no round corner on the bottom of the drop down menu.
How can a person update a jQuery menu from a central file (like XML for example) if the html “ul” and “li” menu structure must be pasted from page to page? How do you update the menu if you have, for example 50 pages, without having to edit page by page and not being able to use Server Side Includes?
Tihs is amazing
I am STILL having problems with some funky z-index issues at this site in IE7…Can anybody help? All my z-index’s are in the order i want (works everything BUT IE7) Does anyone have any solutions? Thanks in advance!
Really nice menu. Thanks for sharing!
Hello Joseph,
Sorry to bother you :)
Just saw your comment about the Sexy Drop Down menu and since you seem to know what you are talking about I thought of asking you just how this menu could be implemented?
I design and create my own webpages but I am no programmer – so without clear instructions I am just left with relying in HTML :)
I know there are 3 elements to this menu but I don’t know how they are supposed to be connected. Would you be able to advise?
Greatly appreciated,
Chaba Tamasi
Toronto, ON
I Just wonder how to use this tutorial in ASP.NET Web Application Using c# in Visual Studio 2005 ? And How to create a dynamic menu loaded from database with it ?
Nice work
NICE. I would like to try it. Thanks…
How did you get the rounded corners to only appear on the last item in the drop down?
hiltpoomo
rd5d
What the heck….you didn’t even show us how to import the .js file or the jquery framework into the head…not everyone knows jquery, it would have only taken you a few extra steps to show us properly. And where did the span tag come from all of the sudden? It wasn’t in the first step of the HTML.
Slick tutorial. I like the look and functionality. Eager to try it out. Thanks!
Since the menu is composed of an html “ul” and “li” menu structure… how would the menu get updated from a central file?
I accidently deleted my previous comment. But curious if anyone has found a way to make this a multi-level navigation? I’ve been trying to alter it, but not having that much success.
Thanks!
Couldn’t you just replace the little arrow with the image of your button and use mouse over instead of click as your javascript action to get a hover instead of the arrow click?
Very nice nav and tutorial. Thanks.
Beautiful design indeed :)
For those of us new to the world of jQuery; would you be able to attach to the Step-by-Step instructions – what files need to be created?
Ie: Step 1. Create a new HTML file with the subnavigation.
Step 2. Create a new .css file and name it….
Step 3. (this is where I get lost >>> where does this STEP 3 supposed to go? To its own new file? Into the body of the HTML code??
Please advise,
Thank you!
great work, you should make it support multi-level, i mean more than two levels
Hello Guys,
A Really Nice Menu. And I improve this to support multiple levels. I also dynamically create menu items in ASP.NET. If you’re interested, review it here: http://www.leoworks.net/jinglecat/post/sexy-drop-down-menu-2010(en).aspx .
Great tutorial!!
Perfect working and amazing! Thank you for all Noupe.
Simply amazing, this is one of the best jquery navigations! Thanks!
hi, I have used this script for my friends site. But when I click on a subnav link when the page opens, the arrow is missing and I cannot click to get the subnav up. Am I the only one with this problem?
Please take a look at the problem here:http://www.masivpromotions.com/
Hmm…. don’t really see how a drop-down-menu can be sexy!?!? I have never seen a web-menu, that I wanted to f### anyway…. :-p But thanks for a great tutorial, very helpfull! :-)
Nice tutorial and menu. My only thought is that having a very small arrow trigger a drop down is very bad UI design. If you have a drop down for a section, don’t seperate it to it’s own small arrow. If you rollover the main menu navigation “Tutorials” or “Resources” then your menu should trigger, not a small arrow beside it. Also, activating via click rather than hover isn’t usually a great option.
Thanks a lot, will be using this in my up-coming project!
thank you admin:)
HELP….
I’m using this for a client but he doesn’t want the arrows.
He want it so that when you click on the actual name on the menu bar the drop down will be activated.
Thanks in advance.