Creating a Click-action CSS3 Dropdown Menu with jQuery
Creating a Click-action CSS3 Dropdown Menu with jQuery
Join the DZone community and get the full member experience.
Join For FreeLearn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.
Nowadays, pure CSS3 menus are still very popular. Mostly – these are UL-LI based menus. Today we will continue making nice menus for you. This will be a nice dropdown menu (looks like menu at http://www.microsoft.com/) with onclicking (instead onhover).
Here are the final results (what we will creating):
Here are the samples and a 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 is the full html code for our menu. As you can see – this is a multi level menu. I hope that you can easily understand it. The whole menu built on UL-LI elements.
<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://www.script-tutorials.com/about/">About</a></li>
<li><a href="http://www.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 () { // 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);
}
}
});
});
</script>
In the bottom – we can see the extra jQuery code. Here are the onclick events and a little bit of animation.
Step 2. CSS
Here are the CSS styles. The first two selectors make the layout of our demo page. All the rest belong to the 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 this tutorial, don’t forget to leave a comment 
Good luck!
What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.
Like This Article? Read More From DZone
Published at DZone with permission of Andrey Prikaznov , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}