In Tips, Tutorials Oct 7, 2008172
jQuery & CSS Example – Dropdown Menu
Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.
The Finished Product
Getting Started
To begin, we need to define our basic menu hierarchy. In order to maintain a structured and semantic approach to this, we will use nothing more than unordered lists of standard links. We’ll use the following code as an example:
<ul id="cssdropdown">
<li class="headlink">
<a href="mine.html?search_engines">Search Engines</a>
<ul>
<li><a href="http://google.com/">Google</a></li>
<li><a href="http://yahoo.com/">Yahoo</a></li>
<li><a href="http://live.com/">Live Search</a></li>
</ul>
</li>
<li class="headlink">
<a href="mine.html?shopping">Shopping</a>
<ul>
<li><a href="http://amazon.com/">Amazon</a></li>
<li><a href="http://ebay.com/">eBay</a></li>
<li><a href="http://craigslist.com/">CraigsList</a></li>
</ul>
</li>
</ul>
You should see something like this:
Creating Dropdown Lists
With our semantic HTML and link structure written out, we can proceed to apply some basic hover techniques that are included in CSS. The :hover pseudo-class is invoked when the mouse is placed over the list item.
We can use CSS to hide the child unordered lists by default, and show them with the :hover pseudo-class, like so:
li.headlink ul { display: none; }
li.headlink:hover ul { display: block; }It is best to take this opportunity to apply some basic styling to the list, such as floating the parent unordered lists in a row, and specifying the width of the unordered list to ensure that no shifting occurs when the elements are hidden or shown. This should look something like this:
The Issue with Internet Explorer
Unfortunately, while the :hover pseudo-class may be elegant, it does not work in Internet Explorer. At this point, a short bit of JavaScript is required to provide a clean fix. All we need to do is select all unordered lists that are within a list item that has the class .headlink and add onmouseover and onmouseout events to them. This can be done in twelve simple lines of code:
window.onload = function()
{
var lis = document.getElementsByTagName('li');
for(i = 0; i < lis.length; i++)
{
var li = lis[i];
if (li.className == 'headlink')
{
li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
}
}
}
Those using jQuery are privileged to an even easier solution:
$(document).ready(function(){
$('li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
Putting It All Together
The dropdown menu is now functional in the major browsers, and is ready to be styled, cleaned up, and shipped.
It is advantageous to start by applying a basic style that's a little more appealing than the standard lists. This allows us to visualize how this will fit into our application or design.
Adding Some Flare
With a few extra lines of CSS, the menu is styled and ready to fit into our site.
Wrapping Up
One important aspect of writing a generic dropdown list is to segregate the CSS and JavaScript to ensure that there are no conflicts. The easiest way to do this is to add the #cssdropdown selector in front of every element.
Finally, we check to see if the #cssdropdown div can be moved around freely. This ensures that dropdown menu we have created will flow nicely when integrated with our existing site design or application user interface.
The full code and example remains both basic and concise to exemplify the simplicity of the underlying technique for using dropdown menus on your website. Enjoy!
Tutorial kindly written by Nathan Wong
172 Comments
Oct 7, 2008
Oct 7, 2008
Oct 8, 2008
Oct 8, 2008
Oct 8, 2008
Oct 9, 2008
Oct 9, 2008
Oct 10, 2008
Oct 10, 2008
Oct 10, 2008
Oct 11, 2008
Oct 11, 2008
Oct 11, 2008
Thanks for the effort.
Oct 11, 2008
Oct 13, 2008
Oct 14, 2008
Great Job……
Nice tutorial
Oct 14, 2008
Oct 15, 2008
Oct 15, 2008
Oct 17, 2008
Oct 17, 2008
I can view this page fine in IE, but in FireFox I can see the comments, but not the article itself.
Oct 17, 2008
Thanks,
Cameron Peterson
Oct 19, 2008
Oct 22, 2008
Oct 27, 2008
Thanks
BOB
Oct 28, 2008
But I’m having an issue with the popup sometimes showing behind content on the page. Is there any way of changing the z-index so it’s always in front?
Thanks
Shaun
Oct 28, 2008
Oct 29, 2008
Oct 30, 2008
Keep it up !!
Nov 14, 2008
This is great tutorial, but why to use jquery if you can make exactly the same effect/stuff with pure html and css, which will be accessible all the time, with enabled/disabled JS.
Great tut anyway, helps a lot to understand the basics of jQuery.
Nov 19, 2008
- Nathan
Nov 20, 2008
Am I doing something wrong? Great tutorial!
Dec 3, 2008
Please remember that some in your audience are completely new to java/html/css.
thanks
Dec 7, 2008
How could I tweak this coding so that whenever the headlink is clicked, the options below stay open until something else is clicked?
Thank you.
Dec 28, 2008
Radek
Jan 7, 2009
Jan 16, 2009
http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=302090867&mt=8
Looks like there’s also a CSS Cheat Sheet from the same guys.
http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=301093674&mt=8
Feb 12, 2009
Feb 17, 2009
Add position: absolute to this line
#cssdropdown li.headlink:hover ul { display: block; position:absolute;}
this stops the items to take up space in the document flow.
I haven’t tested thoroughly so maybe it might break something else.
Feb 28, 2009
ok….the big problem is how to make the submenu div not to disappear when the mouse leaves the button area but enters the submenu div area.(the button div and the submenu div are one next to each other)
any help will be appreciated
Mar 19, 2009
I dont want this. I want the nav to appear above the content of the site? Maybe use a z-layer, but I dont know how or even if that would work here.
Example:
http://www.hattersworkshop.com/ftp/csc/index.html
I tried making different elements position: absolute, but this was always causing a problem in FF 3 where the nev child elements appear behind the text and only become visible when hovered… very strange.
Thanks to anyone for any working solution they come up with.
Mar 19, 2009
Paul’s comment was right on.
Thanks.
Apr 8, 2009
Apr 17, 2009
Apr 17, 2009
Apr 21, 2009
Apr 24, 2009
May 12, 2009
May 13, 2009
i thank you!
May 22, 2009
May 24, 2009
May 28, 2009
Jun 3, 2009
Jun 7, 2009
Jun 9, 2009
Jun 18, 2009
This example is for 2 levels, somebody could tell the modification to achieve 3 levels??
Thank you very much.
Jun 30, 2009
the menu displaces everything when the drop-downs trigger, so it is useless to any website that might actually want to look serious.
Jul 3, 2009
Jul 7, 2009
Excellent tutorial and the JQuery bit is super thanks.
Jul 7, 2009
You can get around this easily with css. Look into ‘z-index’ and the answer is there…
Peace
Jul 28, 2009
Jul 31, 2009
Aug 12, 2009
Aug 15, 2009
Aug 21, 2009
Like was said here before,..
Replace:
#cssdropdown li.headlink:hover ul { display: block;}
With:
#cssdropdown li.headlink:hover ul { display: block; position:absolute;}
Aug 27, 2009
then my script is worked but this script is too hard for learning my script check out mozilla css menu
Aug 31, 2009
Aug 31, 2009
Good commitment.
Hats off.
Sep 1, 2009
Sep 23, 2009
Oct 12, 2009
Oct 14, 2009
I followed your instructions and the drop down works great. Only problem is, it pushes the part of the site that sits below the menu (ie the content section) down whenever a drop down expands. What might I be doing wrong?!! Many thanks for any help you could offer on this. I’m going crazy trying to work it out (CSS is not my strong point)
Oct 14, 2009
Oct 23, 2009
Oct 28, 2009
Nov 8, 2009
@wie yoga:
Uset the jQuery example and change the following bits:
.css(‘display’, ‘block’) to .slideDown(“slow”)
and
.css(‘display’, ‘none’) to .slideUp(“slow”)
Nov 19, 2009
Thanks in advanced!
Nov 20, 2009
Can’t make it work with Flash.
Flash is still in front of the menu.
Where do you put the z-index in the css ?
Nov 27, 2009
I also had som problem with
position:absolute;
My problem was that apparently you have to use the strict mode for IE to have your fixed positioned element work properly. So when I inserted:
at the top of my page it worked great!
Hope this can help anyone!
Nov 27, 2009
“http://www.daniweb.com/forums/thread150830.html”
Cheers!
Dec 1, 2009
Dec 1, 2009
Dec 5, 2009
Dec 10, 2009
I have a slide show that I’ve downloaded from your site and which is running perfectly. On top of the slide show I have a drop down menu. Unfortunately it opens behind the images, which makes it impossible to select the links. How to solve this problem?
Thank you
Dec 17, 2009
Dec 24, 2009
Dec 27, 2009
ajax.wespai.com
Jan 5, 2010
Jan 9, 2010
#cssdropdown li.headlink:hover ul { display: block; position:absolute;}
everything works fine but drop down menu is not under parent but moved to right for about 200px, tried many things but can’t figure out how to fix it…any ideas?
Jan 10, 2010
and looks that problem is resolved in ie7
Jan 12, 2010
Jan 20, 2010
Jan 23, 2010
Jan 24, 2010
Feb 1, 2010
Feb 6, 2010
Feb 10, 2010
To place it over any kind of flash movie you have to publish your flash movie with wmode=transparant in and it will fix any html layers on top of the flash..
cheers
Feb 11, 2010
Feb 18, 2010
Any help would be appreciated.
Feb 21, 2010
Mar 17, 2010
Mar 24, 2010
I’m having a bit of the same issue that a Meg mentioned back in last year (See: Meg
Apr 17, 2009)… Seems I cannot move the drop down too far away from the top header nav div, or it “breaks” the connection, and the drop down never appears… Maybe the solution is to enlarge the header div. Any one else come across this? Suggestions?
FS
Mar 24, 2010
Mar 24, 2010
Then it recognizes the position:absolute.. BUT you still need a degrading ie6 style sheet to fix some other styling issues…
Mar 24, 2010
Mar 24, 2010
[if lt IE 8]
Mar 24, 2010
Mar 24, 2010
script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js” type=”text/javascript”
[endif]
Mar 30, 2010
http://www.sebastiansulinski.co.uk/web_design_tutorials/tutorial/57/jquery_dropdown_menu
Apr 15, 2010
Apr 22, 2010
Add position: absolute to this line
#cssdropdown li.headlink:hover ul { display: block; position:absolute;}
This stops the items to take up space in the document flow.
PLEASE FIX THIS TUTORIAL DESIGN REVIVER !! Otherwise it’s cool.
May 3, 2010
May 14, 2010
May 23, 2010
Jun 4, 2010
This is very good tutorial.
thanks for sharing
Jun 13, 2010
Jun 19, 2010
Jun 23, 2010
thanks
designreviver.com
Jun 23, 2010
Thanks for sharing!
Jun 25, 2010
I would like the menu to fade in, can someone show me how this would be done?
Much thanks.
Jun 26, 2010
Jul 6, 2010
Jul 7, 2010
Jul 27, 2010
Jul 30, 2010
its not working in IE6. so what to do
Jul 30, 2010
$(document).ready(function(){
$(‘li.headlink’).hover(
function() { $(‘ul’, this).css(‘display’, ‘block’); },
function() { $(‘ul’, this).css(‘display’, ‘none’); });
});
BROWSE PROFILE
Most Viewed
Most Recent
Highest Rated
With Videos
Thank you very much for writing the tutorial. Very elegant solution.
li.headlink ul { display: none; }
li.headlink:hover ul {
position: absolute;
display: none;
list-style-type: none;
margin-top: 20px;
padding: 0px;
z-index: 10000;
width:150px;
background-color:#fff;
}
Aug 1, 2010
Aug 6, 2010
I have made this a vertical menu and all is ok except IE6 – When hovering over the link, the child li is not appearing? What could this be?
Cheers
Aug 17, 2010
Aug 20, 2010
Aug 30, 2010
Sep 3, 2010
Sep 3, 2010
Sep 30, 2010
Oct 9, 2010
Oct 10, 2010
Thank you very much
Oct 19, 2010
Oct 20, 2010
Oct 28, 2010
Oct 30, 2010
thank you.
Oct 31, 2010
Oct 31, 2010
Nov 10, 2010
Nov 14, 2010
Thank you very much
Nov 14, 2010
thank you.
Nov 19, 2010
Nov 24, 2010
Nov 26, 2010
Dec 6, 2010
thank you for sharing..
here the link for another one..
http://www.bijusubhash.com/blog/redbrown-drop-down-menu-using-jquery-and-css
Dec 13, 2010
Dec 16, 2010
Dec 17, 2010
Thank you very much
Dec 31, 2010
Jan 1, 2011
Jan 6, 2011
Jan 20, 2011
Jan 21, 2011
Mar 15, 2011
thank you any way
Mar 19, 2011
Apr 1, 2011
Apr 11, 2011
Apr 14, 2011
Apr 27, 2011
May 11, 2011
May 31, 2011
Jun 9, 2011
Jul 4, 2011
Jul 5, 2011
Jul 19, 2011
Jul 25, 2011
thank you
Jul 26, 2011
Aug 8, 2011
Leave a Comment