Click-action CSS3 dropdown menu with jQuery
Nowadays, pure CSS3 menus still very popular. Mostly – this is UL-LI based menus. Today we will continue making nice menus for you. This will nice dropdown menu (looks like menu at http://www.microsoft.com/) with onclicking (instead onhover).
Here are final result (what we will creating):
Here are samples and downloadable package:
Live Demo
download in package
Ok, download the example files and lets start coding !
Step 1. HTML + JS
As usual, we start with the HTML.
Here are full html code with our menu. As you can see – this is multilevel menu. I hope that you can easy to understand it. Whole menu built on UL-LI elements.
index.html
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="example">
<div class="menu">
<span>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<div class="subs">
<div>
<ul>
<li><h3>Submenu #1</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</li>
<li><h3>Submenu #2</h3>
<ul>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</li>
<li><h3>Submenu #3</h3>
<ul>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">Resources</a>
<div class="subs">
<div class="wrp2">
<ul>
<li><h3>Submenu #4</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</li>
<li><h3>Submenu #5</h3>
<ul>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ul>
</li>
</ul>
<p class="sep"></p>
<ul>
<li><h3>Submenu #6</h3>
<ul>
<li><a href="#">Link 11</a></li>
<li><a href="#">Link 12</a></li>
<li><a href="#">Link 13</a></li>
</ul>
</li>
<li><h3>Submenu #7</h3>
<ul>
<li><a href="#">Link 14</a></li>
<li><a href="#">Link 15</a></li>
<li><a href="#">Link 16</a></li>
</ul>
</li>
<li><h3>Submenu #8</h3>
<ul>
<li><a href="#">Link 17</a></li>
<li><a href="#">Link 18</a></li>
<li><a href="#">Link 19</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li><a href="http://script-tutorials.com/about/">About</a></li>
<li><a href="http://script-tutorials.com/click-action-css3-dropdown-menu-with-jquery/">Go Back To The Tutorial</a></li>
</ul>
</span>
</div>
</div>
<script type="text/javascript">
jQuery(window).load(function() {
$("#nav > li > a").click(function (e) { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
e.stopPropagation();
});
$("body").click(function () { // binding onclick to body
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
});
});
</script>
In bottom – we can see extra jQuery code. Here are onclick events and a little of animation.
Step 2. CSS
Here are used CSS styles. First two selectors – layout of our demo page. All rest – belong to menu.
css/style.css
/* demo page styles */
body {
background:#eee;
margin:0;
padding:0;
font-family:Segoe UI,Tahoma,Arial,Verdana,sans-serif;
}
.example {
background:#fff url(../images/blue.jpg);
width:700px;
height:500px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
.menu {
background-color:#d0e6f5;
text-align:center;
width:100%;
}
.menu > span {
display:inline-block;
margin:0 auto;
}
#nav {
display:inline;
text-align:left;
position:relative;
list-style-type:none;
}
#nav > li {
float:left;
padding:0;
position:relative;
}
#nav > li > a {
border:1px solid transparent;
color:#4F4F4F;
display:block;
font-size:90%;
padding:3px 10px;
position:relative;
text-decoration:none;
}
#nav > li > a:hover {
background-color:#e4ecf4;
border-color:#999
}
#nav > li.selected > a {
background-color:#FFFFFF;
border-color:#999999 #999999 #FFFFFF;
z-index:2;
}
#nav li div {
position:relative;
}
#nav li div div {
background-color:#FFFFFF;
border:1px solid #999999;
padding:12px 0;
display:none;
font-size:0.75em;
margin:0;
position:absolute;
top:-1px;
z-index:1;
width:190px;
}
#nav li div div.wrp2 {
width:380px;
}
#nav .sep {
left:190px;
border-left:1px solid #E3E3E3;
bottom:0;
height:auto;
margin:15px 0;
position:absolute;
top:0;
width:1px;
}
#nav li div ul {
padding-left:10px;
padding-right:10px;
position:relative;
width:170px;
float:left;
list-style-type:none;
}
#nav li div ul li {
margin:0;
padding:0;
}
#nav li div ul li h3 {
border-bottom:1px solid #E3E3E3;
color:#4F4F4F;
font-weight:bold;
margin:0 5px 4px;
font-size:0.95em;
padding-bottom:3px;
padding-top:3px;
}
#nav li ul ul {
padding:0 0 8px;
}
#nav li ul ul li {
margin:0;
padding:0;
}
#nav li ul ul li a {
color:#0060A6;
display:block;
margin-bottom:1px;
padding:3px 5px;
text-decoration:none;
font-size:0.9em;
}
#nav li ul ul li a:hover{
background-color:#0060a6;
color:#fff;
}
Live Demo
download in package
Conclusion
Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment 
Good luck!
Related Articles
Click action Multi-level CSS3 Dropdown Menu
Creating a CSS3 Dropdown Menu #2
Creating A CSS3 Dropdown Menu #4
I love this site. i will certainly continue to visit it
Hi.
Thanks for the tip. It is very nice.
But I would like to know how to make the tabs menu automatically hide when you lose focus on them.
Hi Peke,
as example – you can add event handler to click to another area (body as example).
and remove all selected elements in this case.
If only it could work on IE8…
This menu has any problems with IE8?
Now I have installed IE9, but I tested it in compatibility mode for IE8, and the menu worked well. What about you?
Could you please help with hiding tabs menu the way Peke asked? My jQuery knowledge is very limited. I tried but with no luck…
Hello Alex,
Yes, sure, I have updated JS code of this menu, now it can be closed with clicking outside.
Thank you so much! Works like a charm.
Waiting for more great tuts
Nice.. But i want to convert this in to a function… can you please help me in that…
Thanks in advance…
Hello Gaurav,
What do you mean – function? Do you want to turn it into jQuery plugin?
Nice…
But i want to convert this into a jquery plugin so that i can use one code for many dropdowns…
can you please help me in that…
Thanks in advance…
Hello here,
Then, if you would like to have it to multiple menu instances, you have to change jQuery selector ‘#nav’ to another (try to select instances bu Class name).
And after, under ‘click’ handler – use $(this).
This is an awesome menu but I’m looking for what Peke was looking to do also. When you finish tabbing down the menu, after the last selection and it moves onto the next tab element on the page, that the menu disappears. I can’t set the next tab element because the menu will be used on different pages that have varied content and we don’t want to have to go out of order on the page.
Hello homeruntaz,
I didn’t get your problem exactly. But yes, by default, none of tabs is selected. We can use ‘tab’ key to select other menu tabs. Then we can click on some tab to get sub-elements (dropdown menu). Now, all active elements (tabs, and all elements in that dropdown) will be selectable. It means that we can select any element. We also can use ‘tab’ key to switch between them. If we click ‘enter’ at any of elements from dropdown – it will open this link, in case if we click at ‘tab’ element (top level menu element) – it will open a new tab (as expected). As I see – Peke asked about loosing of focus.
Hi, menu is great in Chrome and Firefox.
I can provide screen captures of IE8 and IE9 to show you what I think Syndrael means in his message.
Anyway I can send you these jpg?
Hi Stephane,
Yes, sure, you can contact me directly (use the form at the bottom of our website to contact with me directly)
Hey great tutorial. However, I have a problem. I need it so the main menu links can actually be links but they don’t respond unless jquery isn’t supported in their browser. I was using something like this but yours turned out to be a lot cleaner of an outcome:
http://jsfiddle.net/XwN2L/1063/
It has the effect I want for an example. Any way of getting this?
Hey, figured this out :} e.preventDefault();
$(“#nav > li > a”).click(function (e) { // binding onclick
if ($(this).parent().hasClass(‘selected’)) {
e.preventDefault();
$(“#nav .selected div div”).slideUp(100); // hiding popups
$(“#nav .selected”).removeClass(“selected”);
} else {
$(“#nav .selected div div”).slideUp(100); // hiding popups
$(“#nav .selected”).removeClass(“selected”);
if ($(this).next(“.subs”).length) {
e.preventDefault();
$(this).parent().addClass(“selected”); // display popup
$(this).next(“.subs”).children().slideDown(200);
}
}
e.stopPropagation();
});
Hello Skye,
Sorry for my delay, I had to answer older comments first before I find your comment. And, this is good that you already solved your problem.
Thank you for sharing about drop down menu.
That’s great, but it is not doing well on my blog