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.
Sarfraz, 05 November 2009
Awesome!
Is it possible to show the ‘ARROW’ selected when ‘TUTORIAL’ is clicked and we are on ‘TUTORIAL’ page?
shawnp4h, 05 November 2009
Very Helpful.
definitely I will use for my website designs…
Thanks u so much..
manoj, 06 November 2009
awesome tutorial !
Mandi, 06 November 2009
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?
Brian, 06 November 2009
Brilliant – for designers and front end dev this stuff helps a lot – thanks
Noel, 10 November 2009
very nice…
tuna, 10 November 2009
yeah, really sexy :) I like it very much..
YosiM, 11 November 2009
simple and nice…I used it
Thanks,
pynouch, 17 November 2009
Very useful. I’m gonna use this for my clients’ website for sure.
siebke, 19 November 2009
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
Michael, 19 November 2009
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.
Jason, 20 November 2009
Has anybody been able to get this to work with the actual button rather than just the arrow??
Jason, 20 November 2009
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.
Jason, 20 November 2009
I don’t know why my response just got screwed up
the link should read:
Tutorials
lupir, 02 January 2010
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.
lupir, 02 January 2010
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?)
Key, 20 November 2009
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
Jason, 23 November 2009
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.
Key, 24 November 2009
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
John Evans, 31 July 2011
Change the .subnav to .children in both the CSS and Jquery.
DARKe, 24 November 2009
Simple Amazing and beautiful simple as that.
cataleptic, 29 November 2009
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.
Marcus, 30 November 2009
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
Key, 02 December 2009
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!
Carmen, 04 December 2009
That’s Hot!!! I live jquery even more!
Jan Ole Peek, 10 December 2009
This menu is awesome. Simple, sleek, and elegant and it works in IE! Thank you!
Vampal, 10 December 2009
Nice, thanks for sharing
Mike, 17 December 2009
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?
Mike, 17 December 2009
Looks like it’s incompatible with NestedSortables (http://code.google.com/p/nestedsortables/). Or vice versa. :)
Clayton Correia, 17 December 2009
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”
});
C3 Customs, 18 December 2009
Amazing, truly a breath of fresh air, keep up the innovations.
Adam, 19 December 2009
Very nice! I like the transition effect on the submenu not really seen this around much on navigations
Jontek, 21 December 2009
Can You upload zip archive? Please!!
scorpio, 23 December 2009
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.
webdev, 24 December 2009
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?
sachin, 27 December 2009
Tihs is amazing
rc, 28 December 2009
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!
Joseph Griffin, 28 December 2009
Really nice menu. Thanks for sharing!
chaba, 12 January 2010
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
Neven, 28 December 2009
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 ?
Leo, 31 December 2009
NICE. I would like to try it. Thanks…
michael, 04 January 2010
How did you get the rounded corners to only appear on the last item in the drop down?
Damn, 05 January 2010
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.
Amanda, 05 January 2010
Slick tutorial. I like the look and functionality. Eager to try it out. Thanks!
WebDeCode, 07 January 2010
Since the menu is composed of an html “ul” and “li” menu structure… how would the menu get updated from a central file?
Jerm, 08 January 2010
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?
Pusparaj, 09 January 2010
Very nice nav and tutorial. Thanks.
chaba, 10 January 2010
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!
Dan Smith, 28 April 2010
Hi Step 3,
You will need to save step 3 as a .js file (javascript) example jquery.js
you will then need to point to this file in your html file (between the
tags)
Hope this helps
kariem, 11 January 2010
great work, you should make it support multi-level, i mean more than two levels
Xiaofeng Wang, 14 January 2010
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 .
Courier Express Team, 16 January 2010
Great tutorial!!
Atasözleri ve Anlamlar?, 18 January 2010
Perfect working and amazing! Thank you for all Noupe.
Adam B, 18 January 2010
Simply amazing, this is one of the best jquery navigations! Thanks!
ansar, 19 January 2010
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/
James, 21 January 2010
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.
lee, 23 January 2010
Thanks a lot, will be using this in my up-coming project!
Yanick Belanger, 26 January 2010
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.
Peter Kahuria, 27 January 2010
Thank you very much for this tutorial. I tried creating a drop down menu myself and I got stuck using the mouseover/mouse out event. You have used a great trick!
Ralf S., 30 January 2010
Hi, Thank for the great menu. Just one question. Is it possible to drop down menu only by mouse over the main nav with out click on the arrow?
Ralf
tom, 01 April 2010
I just tried this and it worked…
$(“ul.topnav li span”).mouseover(function() {
vinay, 19 April 2010
this is good it help me lot
P-L Gendreau, 28 January 2010
Very sleek menu, nice work! I didn’t really like the clicking part so I slightly modified your code to work with .hoverIntent (which bypasses most of the issues associated with .hover)
$(document).ready(function(){
var config = {
sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: makeTall, // function = onMouseOver callback (REQUIRED)
timeout: 400, // number = milliseconds delay before onMouseOut
out: makeShort // function = onMouseOut callback (REQUIRED)
};
$(“ul.topnav li”).hoverIntent(config).hover(function() {
$(this).addClass(“subhover”); //On hover over, add class “subhover”
}, function(){ //On Hover Out
$(this).removeClass(“subhover”); //On hover out, remove class “subhover”
});
});
function makeTall() { $(this).find(“ul.subnav”).slideDown(‘normal’).show();}
function makeShort(){ $(this).find(“ul.subnav”).slideUp(‘normal’);}
Stephen, 01 February 2010
P-L Gendreau,
I tried making your changes to the dropdown.js and it seems to have broken the functionality. Am I supposed to add your code into a new (seperate) JS file? Is there a way that you can include your JS file for us to see in it’s entirety?
Matt, 02 February 2010
I too tried this as i would prefer my navigation to not require a click, however, i was unsuccessful in making it work?
eka, 02 February 2010
TRY THIS IT worked for me
$(document).ready(function(){
$(“ul.subnav”).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav
$(“ul.topnav li span”).hover(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”
});
});
Matt, 02 February 2010
Not too sure? The code seemed a little different for me with the ” and my ”
It didn’t work
Shivanand, 02 February 2010
No,the script is not working.
HERO, 16 February 2010
This script doesn’t work because of the wrong quotes at the end of line 2. Switch the empty pair of “” and you’re set.
P-L Gendreau, 21 February 2010
As I said, “I slightly modified your code to work with .hoverIntent”, the keyword being hoverIntent. Google is your friend ;)
Basti, 06 February 2010
A very nice Tutorial but the script isn’t working ?!
Please help :)
tunetek @gmx.de
jerry, 08 February 2010
view source page from here: http://www.sohtanaka.com/web-design/examples/drop-down-menu/ that should help :-)… If it doesn’t work you might have something buggy with your css. Try commenting out some of your css code that might help you solve the problem too
Aboubaker Nour, 08 February 2010
Thank you for the tutorial,
Can I make it just when the mouse hover it the drown menu works ?
Peter, 10 February 2010
Hi, Thank for the great menu.
Does this support jQuery UI?
matt, 11 February 2010
I was able to get the hove working by adding this as my script
http://codeviewer.org/view/code:bf9
Virgil, 14 February 2010
looks nice… i’ll give it a try thanks.
Kyle, 14 February 2010
Eka’s code did work if you want it to drop down when just hovering over the text. Make sure you put a span around the link and then put in this code (I have changed out all the quotes in the code and switched them to apostrophes):
$(document).ready(function(){
$(‘ul.subnav’).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav
$(‘ul.topnav li span’).hover(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”
});
});
rafs, 08 March 2010
you also forgot the between the quotes in line two.
rafs, 08 March 2010
i meant {span} and {/span} (replace { with greater and less than signs)
John, 25 August 2010
PLEASE help me with this. I am trying get this rollover text thing to work. I am NOT an advanced user. I see what you posted, I just don’t know how to add it to what i have. Please help me.
felipe saavedra, 16 February 2010
muchas gracias.
Vidit Kothari, 17 February 2010
It’s a very easy to understand tut.
Thank You so much!!! :)
Tony, 02 March 2010
Great menu script, my only problem is I need it to work with older browser versions, i.e. IE6 & IE7. I can’t get the submenu dropdown to display no matter how high I set the z-index property
Any ideas?
Thanks in advance
Paul, 29 April 2010
Are you using transparent PNGs? If you are, it could be the IE Z-Index bug. Try giving the parent element a higher z-index. ie:
Page
…
laxman kafle, 19 February 2010
can we use this in blogger
Design Dazzling, 22 February 2010
Thanks so much for this menu
Tony, 02 March 2010
Hi Michael, I can’t get my dropdown menu to display in IE6 or IE7 no matter how high I set the z-index. I see you had no such trouble. Did you have to do anything special?
thanks in advance
Tony
Michael Giles, 04 March 2010
Can you send a link to the page you are developing? I’ll try to see what the problem is.
chris, 07 July 2010
Michael, how do I get the drop down working in IE6? All other browsers work fine. I see Tony received an answer. The site I’m developing is http://www.7dma.com. I would really appreciate any help you can give here or email identity1040@yahoo.com.
Thank you,
Chris
alex, 07 July 2010
for those who cannot run this dropdown in ie6&7, the fixing is you should grab the latest the jquery lib. for instance 1.4.2, the 1.3 brunches cannot works in ie 6&7, i met this problem before. Then fixing it after migrating to 1.4.2.
cheers.
Ron Jomer, 10 November 2010
IE is so hard to work with jQuery! just quit using it! use chrome or firefox instead. even if you figure out how this would run on IE, you will find yourself lost again next time you try other jQuery functionalities. So please just quit using IE. its one of microsoft’s erroneous works! For one, its slow on browsing, it mixup css formatting and it mess up with JQUERY! for god’s sake!!! I hate to say this on microsoft but…IE is made by damn stupid developers! (^_^)v “peace” hehe…
Robert N, 02 December 2010
@Ron Jomer: Its not always that simple! Many companies / Schools still use IE6 as the standard browser. I would expect this to change with time but you cant just drop support for IE6.
Carl, 03 March 2010
Hi,
Excellent menu, easy to style, I just have one request. Is there a way to have add level 3 menu options as well. I have tried it, but the level 3 menu appears behind the level 2 menu dropdown.
Thanks in advance.
Jim Tan, 09 April 2010
I’m looking for sexy menu that support 3rd level submenu.
Eric, 04 March 2010
Love this. How would one modify this to pop up instead of down. I want to create a footer menu…. something like facebook has for contacts. Thanks! :)
Evan, 05 March 2010
Thanks for pointing us to your solution, your JS worked fine for me.
And thanks for this post in general – I hate drop-down stuff, this saved me loads of time!
Chicago Web Design, 08 March 2010
Awesome, Im also curious as to what mods you need to make to get this to run up instead of down?
TheShadow, 09 March 2010
Hi,Nice tutorial.i have added to my website but i don’t see drop down icon.and regarding java script what should be the file name for it?
Kingsofweb, 09 March 2010
Thank you for this, i have tried also but could not do it, this helps alot!
Thnak you
Jon
DJPhilips, 15 March 2010
I LOVE this tutorial and script. Thank you. I have made some mods for it and even made it a dynamic menu for my custom CMS. I’m having one tiny issue though: For some reason, headers in my content appear stacked above the nav, while the content properly is stacked below. I have even carved out all z-index CSS descriptors site-wide, and still have this issue. Any advice? Assigning a high z-index for the menu didn’t help.
teewuane, 21 October 2010
did you ever find a solution for this? what you described sounds like what i’m running into but only in ie6+7
NPXP, 20 March 2010
This is something what everyone should look into. Improving the appearance of their blogs and websites.
First time attraction can mean a lot in terms of return visitors.
Alex, 24 March 2010
very nice informative post…..loved it
Mike, 30 March 2010
I was wondering where I can get the required background images for the dropdowns and menus. Thanks!
Rock, 14 January 2011
Nice
controlsea, 30 March 2010
It looks so sexy.I’ll get to try it~~
James Wilson, 31 March 2010
the hover works for me too, but i still have a jquery error:
handler is undefined
[Break on this error] if ( !handler.guid )
any ideas?
sai, 28 February 2011
Good Work, But i need one thing when we are click on the down arrow icon, up arrow icon have to display instead of down arrow.
Is it possible?
James Wilson, 31 March 2010
i got it working, its the second part of the function causing the error so i commented it out and now my hover works fine and NO errors:
$(document).ready(function(){
$(“ul.subnav”).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav
$(“ul.topnav li span”).hover(
function() { //When trigger is clicked…
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(“ul.subnav”).slideDown(1200).show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(“ul.subnav”).slideUp(500); //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”
},
function () {
//
}
);
});
Mike, 31 March 2010
Where can I download the source files for this nav bar?
bob6993, 24 March 2011
Go to the demo and view the source,
Find the image URL’s in the css at the top,
add them to the end of the URL and save them!
ope this helped!
Xavier, 01 April 2010
Great drop down menu, i like it
Andrei, 03 April 2010
Hi, I tried the code myself to put it on the forum menu goes up as arrows and a banner appears to them so what now? Please help me, and me trying to make millions and uplodati file on a website please I really need. I do not know HTML and CSS well. I put a code, “notepad” and watched the tutorial and not going to put it. Help me please
Diana, 11 January 2011
Hi, I read ur message. I also a newcomer for HTML-CSS things,…
Maybe you can share to me the progress about where you learn and do you still follow it until now?
Help me please
elfo, 07 April 2010
You might want to consider adding white-space: pre-line; to your elements to prevent overflowing in some browsers (Firefox 3.6.3 for instance).
elfo, 07 April 2010
… to your elements, that is. You might also want to make a change to the comment filtering system so it replaces with > instead of stripping them completely.
ekom, 12 April 2010
awesome tuts, just looking for this sexy menu solutions for one of my website project.
Tim, 14 April 2010
Some of the author’s other tutorials have been really useful for me, but the result for this one is sub-par. The nav menu isn’t user-friendly because you have to click on the parent links instead of just hovering upon them. People expect the latter and, worse, you have to click on the relatively small triggers and not the actual parent links.
Jason, 29 July 2010
Think about this in terms of the iPad/iPhone, though. You can’t hover on those, but you can use this very nice menu to click-and-expand.
Kudos!!!
nev, 15 March 2011
Doesn’t work for iPad, because on iPad the menus don’t disappear when you tap the item again – they stay in place.
Gideon, 24 December 2010
You can pull the spans out and change onclick to onmouseover. Then just change any $(this).parent().find to $(this).find
Problem solved, worked great for me and I also didn’t want the whole click to drop down function.
Gianni, 06 January 2011
Hey Gideon,
That worked great to get the slide down action only on the link, but take a look at what I’m working on here (http://www.niangi.com/kbgtest/tester.html)
I want the hover state for the main nav to stay when I mouse onto the subnav… any idea how to do that?
Thanks!
3Dom, 15 January 2011
Gideon, what you are asking for is only achievable through Javascript and not through CSS alone.
You will have to add a line of code that changes the default css property ‘color’ for the topnav list item (the bit in the js that instructs the menu to drop down).
You will then need to add another line of code to the part just after where it instructs the menu to go away when you hover off (css ‘color’ back to original color).
Let me know how you go.
I’ll give it a go and let you know.
3Dom, 15 January 2011
sorry, that was at Gianni
3Dom, 15 January 2011
sorry, i meant gianni
Darren, 21 January 2011
Gideon,
Not sure if the sample code changed or not, but I’m not seeing any “onclick” to change to “onmouseover”.
I want to do the same as you, but I’m new to changing javascript. Any chance you could look at the source of Website link above (it is the menu code only).
dinox, 08 February 2011
click to mouseover
Boldis Media, 17 April 2010
Wonderful web coding tutorials, thanks a lot!
James Wilson, 18 April 2010
My hover menu is a DISASTER in Ie7 with the z-index issues.
Can anyone help me out please? It’s worth a link back to your site or blog if you do :)
http://www.enterf1.com/f1-tickets/bahrain.asp
F1 tickets link at the top of the page is my hover menu.
Please get in touch via the contact us button if you can help us out!
James Wilson, 08 March 2011
a million people visit my site on the above link from this webpage, but no one could help me with the IE7 issues! please get in touch via my contact link if you can help! :)
Raj, 19 April 2010
Hi
I am new to this navigation menu. I am finding difficult to get this navigation to work. Any one can help me with step by step clear tutorials
yashin, 21 April 2010
nice , thanks for you great work and help
dogboy, 28 April 2010
Blue and grey go well together. I don’t like the rounded ‘tube’ look of the menu personally but the colors are ok.
dexter, 24 September 2010
totally agree the colors are okay, the tutorial is about how to create a drop down menu anyway not about how to color menu to make it look nice.
Dan Smith, 28 April 2010
Thanks for the great tutorial,
However can someone point me in the right direction to have a sub sub menu?
Thanks
Mike, 17 February 2011
I’m trying to implement this as well. Have you had any progress in getting a sub sub menu working?
Matt, 14 July 2011
I’m also looking for this functionality menu –> sub-menu –> sub-menu of sub-menu
i need at least 3 levels of sub-menus! anyone know how to do it?
Ryan, 28 April 2010
hi! i really like this nav menu, and the tutorial was excellent. However, i am having a problem with the menu. It wont display over the rest of my content. I have tried altering the z-index, but to no avail. Can someone please tell me how i do this? i’m sure its something simple, but i cant work it out.
Many thanks
Ryan
Paul, 29 April 2010
What’s your content you’re trying to display over? Flash, text, images? If it’s Flash than play with wmode.
AlliClinton, 28 April 2010
I want to make the drop down menu appears when the cursor is on a menu, not on the side knob
Boldis Media, 28 April 2010
Very attractive menu, thanks for example!
FutureBon!, 04 May 2010
Thank you much! Very helpful! I did it as an excercise, and learned more about using jquery. Looks sharp :D
xene, 12 May 2010
Multilevel support?
Evan Skuthorpe, 14 May 2010
An awesome tutorial! Looking into getting it to work now!
janis, 15 May 2010
Very nice tutorial
but it does break down the function if some one has javablocker like me :s
to bad the basic menu function doesn’t work any more, if you have a javablocker:(
webdesign agentur, 19 May 2010
sehr toller beitrag. macht weiter so und ich komme immer wieder gerne hier auf eure seite.
lieben gruß, mario
Riad Meknes, 22 May 2010
script doesn’t work even when i added those cotes @ the end any solution please?
Thank you
Jason, 24 May 2010
I think I love you, your JS works great for the hover! Thank you!
Mukesh Variya, 27 May 2010
Hello,
I used this code and working fine. But there is problem that it does not work with n level menu.
I put this code
Home
Tutorials
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sandra, 29 May 2010
Dont forget to close the tags if you want the effect to work. Its easy to overlook some code, sometimes you just forgets some small characters and the result is not what you were hoping for.
David, 30 May 2010
If you want to trigger the drop down on mouseover for the entire link instead of the span… just target the link:
$(“ul.topnav li a”).mouseover(function() { //When trigger is clicked…
Ryan H.R the junior, 14 June 2010
thanks!… this is very simple.. this works for hover..
Chris, 17 August 2010
HI, I had sussed this, however when using this method, for some reason the onmouse out function does not work unless you go onto the drop down itself then mouse out.
Any ideas?
Drew, 12 October 2010
very nice addendum. works like a charm
Claire, 31 October 2010
Thank you, so simple and works!! :)
Craig, 28 December 2010
You Rock! Thanks for this code swap!
sakara, 14 April 2011
mine is
$(“ul.topnav li span, ul.topnav li a”).mouseover(function() { //When trigger is clicked…
Beth, 07 June 2010
for those wanting hover without extra markup:
$(document).ready(function() {
$(“ul.topnav > li a:first-child”).mouseover(function() {
$(this).parent().find(“ul.subnav”).slideDown(‘fast’).show();
$(this).parent().hover(function() {
}, function() {
$(this).parent().find(“ul.subnav”).slideUp(‘slow’);
});
}).hover(function() {
$(this).addClass(“subhover”);
}, function() {
$(this).removeClass(“subhover”);
});
});
Mark, 13 July 2010
You all must be joking here. All Hover codes that you have pasted doesn’t work properly in FF 3.6.6 . Be sure that you have tested the code before and after posting because it gets me frustrated.
Mark, 13 July 2010
I meant everybody should add:
“When copying sourcecode to editor be sure the double quotes and quotes are properly copied”. Most of the time when I copied the sourcecode from this website (website opened in FF) I had to change single quotes and double quotes from italic version to normal – these look very similar but are not the same. BTW the Beth’s code works, just after copying rewrite these double quotes and singlequotes and it is working properly.
Jeffrey Bennett, 10 June 2010
Great script! I’ll be using this in some of my web design work. Thank you! :)