Written by 
Creating CSS3/jQuery crossbrowser Drop-down menu with tabs
This is our seventh CSS3 menu. Today we will make dropdown menu with parental tabs (as first level). Part of the work we pass on to the shoulders of jQuery (switching tabs, display popups). In the current version – we have three levels of menus. So, lets start !
This is our final result (how menu will looks):
Here are samples and downloadable package:
Live Demo
download in package
Ok, download our package and lets start creating this menu!
Step 1. HTML
Here are html code of our menu. I will hide repeating elements to make code smaller here. Anyway – you will able to see whole code in our package.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/script.js'></script>
<title>CSS3/jQuery Drop-down menu with tabs #7</title>
</head>
<body>
<div class="example">
<!-- defining main tabs elements -->
<div id="tabs-container">
<ul class="tabs">
<li class="active"><a href="#">Section one</a></li>
<li><a href="#">Section two</a></li>
<li><a href="#">Section three</a></li>
<li><a href="#">Section four</a></li>
</ul>
</div>
<!-- defining top menu -->
<div id="nav-container">
<ul class="nav" id="1">
<!-- defining top menu elements -->
<li><a href="http://www.script-tutorials.com/">Home</a></li>
<li><a href="http://www.script-tutorials.com/">Tutorials</a>
<!-- defining sub menu elements -->
<ul class="sub">
<li><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
<li><a href="http://www.script-tutorials.com/category/jquery/">JS / jQuery</a></li>
<li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li>
<li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li>
</ul>
</li>
<li><a href="http://www.script-tutorials.com/category/resources/">Resources</a>
<ul class="sub">
<li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li>
<li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li>
<li><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">Menus #3</a>
<ul class="sub">
<li><a href="#">link 31</a></li>
<li><a href="#">link 32</a></li>
<li><a href="#">link 33</a></li>
<li><a href="#">link 34</a></li>
<li><a href="#">link 35</a></li>
</ul>
</li>
<li><a href="#">Menus #4</a>
<ul class="sub">
<!-- repeated sublinks -->
</ul>
</li>
<li><a href="http://www.script-tutorials.com/about/">About</a></li>
<li><a href="http://www.script-tutorials.com/creating-css3jquery-crossbrowser-dropdown-menu-with-tabs/">Back</a></li>
</ul>
<ul class="nav" id="2" style="display:none;">
<li><a href="#">Menus #5</a></li>
<li><a href="#">Menus #6</a></li>
<li><a href="#">Menus #7</a></li>
</ul>
<!-- and other repeated subs with similar structure -->
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
Step 2. CSS
Here are used CSS styles. First two selectors (you can skip it) belong to our demo page. All rest – menu #7 styles.
css/style.css
/* demo page styles */
body {
background:#eee;
margin:0;
padding:0;
font-family: Helvetica,Arial,sans-serif;
font-size: 11px;
}
.example {
position:relative;
background:url("../images/background.jpg") no-repeat scroll center center #fff;
width:640px;
height:586px;
border:1px #000 solid;
margin:20px auto;
padding:5px 0;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
/* tabs section */
#tabs-container {
clear:both;
font-size:11px;
height:26px;
margin:0 auto;
padding:0
}
.tabs li {
float:left;
list-style:none;
position:relative
}
.tabs li a:first-child {
margin-left:10px
}
.tabs li a {
background:#f3f3f3;
border:none;
border-left:1px solid #d5d5d5;
border-right:1px solid #d5d5d5;
border-top:1px solid #d5d5d5;
color:#333;
display:block;
margin:0 2px 0 0;
padding:6px 10px 4px
}
.tabs li.active a {
-webkit-border-radius:4px 4px 0 0;
background:#fff;
border-bottom:1px solid #fff;
border-left:1px solid #d5d5d5;
border-radius:4px 4px 0 0;
border-right:1px solid #d5d5d5;
border-top:1px solid #d5d5d5;
color:#222;
display:block;
padding:6px 10px 4px
}
.tabs li.child a {
-webkit-border-radius:0 4px 0 0;
background:#f3f3f3;
border-radius:0 4px 0 0;
color:#333;
display:block;
margin:0;
padding:6px 10px 4px
}
.tabs li a:hover {
background:#fafafa;
border-bottom:1px solid #d5d5d5;
color:#fff;
text-decoration:none
}
/* Targeting the first level menu */
.tabs {
display:block;
margin:0;
padding:1px 0 2px;
position:absolute;
z-index:100
}
.tabs > li > a:hover {
background:#ececec;
color:#222
}
.tabs > li.active > a:hover {
-moz-border-radius:3px 3px 0 0;
-webkit-border-radius:3px 3px 0 0;
background:#fff;
border-bottom:1px solid #fff;
border-radius:3px 3px 0 0;
color:#222
}
/*Middle Drop-Down Navigation*/
#nav-container {
border-bottom:1px solid #d5d5d5;
border-top:1px solid #d5d5d5;
clear:both;
font-size:11px;
height:33px;
margin:0 auto;
padding:0
}
/* Targeting both first and second level menus */
.nav li {
float:left;
list-style:none;
position:relative
}
.nav li a {
background:url(images/arrow.png) no-repeat right;
border:none;
color:#222;
display:block;
margin:0 5px 0 0;
padding:5px 20px 5px 8px
}
/* Targeting the first level menu */
.nav {
display:block;
margin:0;
padding:5px 0 2px;
position:absolute;
z-index:100
}
.nav > li > a:hover {
-moz-border-radius:3px 3px 0 0;
-webkit-border-radius:3px 3px 0 0;
background:#507aa5 url(images/arrow_hover.png) no-repeat right;
border-radius:3px 3px 0 0;
color:#fff;
padding:5px 20px 5px 8px
}
/* Targeting the second level menu */
.nav li ul {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topright:3px;
-moz-box-shadow:1px 1px 1px #333;
-webkit-border-bottom-right-radius:3px;
-webkit-box-shadow:1px 1px 1px #333;
background:#507aa5;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-right-radius:3px;
box-shadow:1px 1px 1px #333;
color:#222;
display:none;
margin:0;
padding:2px 0;
position:absolute;
width:140px
}
.nav li ul li {
width:100%
}
.nav li ul li a {
background:#507aa5;
border:none;
color:#fff;
line-height:25px;
margin:0;
padding:0 0 0 8px
}
.nav li ul li a:hover {
background:#466A90
}
.nav li ul li.strong-archive a {
border-top:1px solid #466A90;
font-weight:600
}
/* A class of current will be added via jQuery */
.nav li.current > a {
-moz-border-radius:3px 3px 0 0;
-moz-box-shadow:1px 1px 1px #333;
-webkit-border-radius:3px 3px 0 0;
-webkit-box-shadow:1px 1px 1px #333;
background:#507aa5 url(images/arrow_hover.png) no-repeat right;
border-radius:3px 3px 0 0;
box-shadow:1px 1px 1px #333;
color:#fff
}
/* CSS fallback */
.nav li:hover > ul.child {
display:block
}
Step 3. Images
Here are only one image for background of demo:
Step 4. JS
In our menu I using jQuery a little. Beside jquery.js (in ‘js’ folder), I have also:
js/script.js
$(document).ready(function(){
$('.tabs li a').click(function () {
$('.tabs li').removeClass('active');
$(this).parent().addClass('active');
$('.nav').hide();
var index = $('.tabs li a').index(this);
$('.nav').eq(index).show();
return false;
});
$('.nav li').has('ul').hover(function(){
$(this).addClass('current').children('ul').fadeIn();
}, function() {
$(this).removeClass('current').children('ul').hide();
});
});
This code is very simple, so I hope to not have to explain every line here.
Live Demo
download in package
Conclusion
Today we made new nice menu (seventh), Your comments and thanks are very welcomed. Good luck!
| I am web developer with huge experience (in web languages and even in system languages). Also I am the founder of current website (and several another). I like to write blogs about web development/design. Feel free to Follow us on Twitter: tweetmeme_screen_name='AramisGC'; | If you Enjoyed our article don't forget to Share the love with your friends. |
very nice specially the menu UI . i’ll be using this one for my next project . last week i did a CSS 3 Drop Down Menu(http://youhack.me/2011/09/18/how-to-build-a-drop-down-menu-enhanced-with-css3/) something similar to yours for a client .
Thanks Jerry for sharing your version
nice job. congratulations