Drop down menus are pretty popular on the Web these days. There are a lot of pre-built solutions out there which are freely available, but a lot of them come with unmanageable markup and an excessive amount of included CSS. So here’s a really simple way to add a jQuery-powered drop down menu to your own Web site using simple markup and whatever CSS you like.
The Demo
Here’s our finished product with just a little bit of CSS to get it started:
The HTML
First, the easy part; we need a list of menu items.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <ul id="dd_menu">
<li><a href="#">Menu Item 1</a>
<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3 »</a>
<ul>
<li><a href="#">Sub sub item 1.3.1</a></li>
<li><a href="#">Sub sub item 1.3.2</a></li>
<li><a href="#">Sub sub item 1.3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu Item 2</a>
<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a>
<ul>
<li><a href="#">Sub item 3.1</a></li>
<li><a href="#">Sub item 3.2</a></li>
<li><a href="#">Sub item 3.3</a></li>
</ul>
</li>
</ul> |
<ul id="dd_menu">
<li><a href="#">Menu Item 1</a>
<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3 »</a>
<ul>
<li><a href="#">Sub sub item 1.3.1</a></li>
<li><a href="#">Sub sub item 1.3.2</a></li>
<li><a href="#">Sub sub item 1.3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu Item 2</a>
<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a>
<ul>
<li><a href="#">Sub item 3.1</a></li>
<li><a href="#">Sub item 3.2</a></li>
<li><a href="#">Sub item 3.3</a></li>
</ul>
</li>
</ul>
This is pretty simple markup. All we have are some nested lists, and one ID attribute to identify the menu. If you want to add in some fancy styling you might like to sprinkle in a few class attributes.
The JavaScript
This is a jQuery-powered menu, so we’ll need to throw in a reference to jQuery. You can download a copy yourself, or use Google’s hosted version by including this somewhere between your
tags:
1
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Now that we have included jQuery, we need the code to power our drop downs. Add this in just before your closing tag:
1
2
3
4
5
6
7
8
| <script type="text/javascript">
$('#dd_menu > li').hover(function() {
$('> ul', this).toggle();
});
$('#dd_menu > li > ul > li').hover(function() {
$('> ul', this).toggle();
});
</script> |
<script type="text/javascript">
$('#dd_menu > li').hover(function() {
$('> ul', this).toggle();
});
$('#dd_menu > li > ul > li').hover(function() {
$('> ul', this).toggle();
});
</script>
If you want fancy fade or slide effects, you could replace the references to toggle() with fadeToggle() or slideToggle(). Have a play around until you come up with something that you like.
The CSS
This part is entirely up to you; it’s your menu! Having said that, here’s some CSS that you’ll definitely need to add:
1
2
3
| #dd_menu ul {
display: none;
} |
#dd_menu ul {
display: none;
}
Without this, the full menu will display by default, which sort of defeats the point of a drop down menu.
To give you a starting point, here’s the CSS I used in my demo. Feel free to copy and modify it.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| #dd_menu {
padding: 0;
list-style: none;
overflow: auto;
text-align: center;
}
#dd_menu ul {
display: none;
position: absolute;
background-color: #fff;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: red;
padding: 0;
list-style: none;
width: 160px;
}
#dd_menu ul li {
background-color: #ccc;
}
#dd_menu ul li:hover {
background-color: #fff;
}
#dd_menu > li {
float: left;
border: 1px solid red;
background-color: #ccc;
height: 30px;
line-height: 30px;
}
#dd_menu li a {
width: 160px;
display: block;
}
#dd_menu ul li ul {
left: 160px;
margin-top: -30px;
border-top-width: 1px;
width: 160px;
padding: 0;
} |
#dd_menu {
padding: 0;
list-style: none;
overflow: auto;
text-align: center;
}
#dd_menu ul {
display: none;
position: absolute;
background-color: #fff;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: red;
padding: 0;
list-style: none;
width: 160px;
}
#dd_menu ul li {
background-color: #ccc;
}
#dd_menu ul li:hover {
background-color: #fff;
}
#dd_menu > li {
float: left;
border: 1px solid red;
background-color: #ccc;
height: 30px;
line-height: 30px;
}
#dd_menu li a {
width: 160px;
display: block;
}
#dd_menu ul li ul {
left: 160px;
margin-top: -30px;
border-top-width: 1px;
width: 160px;
padding: 0;
}
Why all the JavaScript?
The demo at the start of this post can be achieved without any JavaScript. Try it yourself; strip out all the JavaScript, and then add this CSS:
1
2
3
4
5
6
7
| #dd_menu > li:hover > ul {
display: inline;
}
#dd_menu > li > ul > li:hover > ul {
display: inline;
} |
#dd_menu > li:hover > ul {
display: inline;
}
#dd_menu > li > ul > li:hover > ul {
display: inline;
}
It works the same as before! Why do we even bother with all the jQuery?
The goal of this post is to provide a starting point, to give you a basic structure upon which you can build. Using jQuery adds in the possibility to add simple effects like sliding, which will make your menu look a lot nicer than the demo above! If you’re happy without fancy effects and the like, then by all means copy in the additional CSS and leave it at that. Otherwise, use the jQuery code and get your hands dirty!
If you use this on your site, share the link in the comments. I’d love to see what you come up with.
