Creating CSS3/jQuery crossbrowser Drop-down menu with tabs

Tutorials

CSS3/jQuery dropdown menu with tabs tutorial. 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):

CSS3/jQuery menu7

Here are samples and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]


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

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
03 <head>
04     <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
05     <script type='text/javascript' src='js/jquery.js'></script>
06     <script type='text/javascript' src='js/script.js'></script>
07     <title>CSS3/jQuery Drop-down menu with tabs #7</title>
08 </head>
09 <body>
10 <div class="example">
11     <!-- defining main tabs elements -->
12     <div id="tabs-container">
13         <ul class="tabs">
14             <li class="active"><a href="#">Section one</a></li>
15             <li><a href="#">Section two</a></li>
16             <li><a href="#">Section three</a></li>
17             <li><a href="#">Section four</a></li>
18         </ul>
19     </div>
20     <!-- defining top menu -->
21     <div id="nav-container">
22         <ul class="nav" id="1">
23             <!-- defining top menu elements -->
24             <li><a href="https://www.script-tutorials.com/">Home</a></li>
25             <li><a href="https://www.script-tutorials.com/">Tutorials</a>
26                 <!-- defining sub menu elements -->
27                 <ul class="sub">
28                     <li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
29                     <li><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></li>
30                     <li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li>
31                     <li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li>
32                 </ul>
33             </li>
34             <li><a href="https://www.script-tutorials.com/category/resources/">Resources</a>
35                 <ul class="sub">
36                     <li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li>
37                     <li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li>
38                     <li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
39                 </ul>
40             </li>
41             <li><a href="#">Menus #3</a>
42                 <ul class="sub">
43                     <li><a href="#">link 31</a></li>
44                     <li><a href="#">link 32</a></li>
45                     <li><a href="#">link 33</a></li>
46                     <li><a href="#">link 34</a></li>
47                     <li><a href="#">link 35</a></li>
48                 </ul>
49             </li>
50             <li><a href="#">Menus #4</a>
51                 <ul class="sub">
52                     <!-- repeated sublinks -->
53                 </ul>
54             </li>
55             <li><a href="https://www.script-tutorials.com/about/">About</a></li>
57         </ul>
58         <ul class="nav" id="2" style="display:none;">
59             <li><a href="#">Menus #5</a></li>
60             <li><a href="#">Menus #6</a></li>
61             <li><a href="#">Menus #7</a></li>
62         </ul>
63         <!-- and other repeated subs with similar structure -->
64     </div>
65     <div style="clear:both"></div>
66 </div>
67 </body>
68 </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

001 /* demo page styles */
002 body {
003     background:#eee;
004     margin:0;
005     padding:0;
006     font-familyHelvetica,Arial,sans-serif;
007     font-size11px;
008 }
009 .example {
010     position:relative;
011     background:url("../images/background.jpg"no-repeat scroll center center #fff;
012     width:640px;
013     height:586px;
014     border:1px #000 solid;
015     margin:20px auto;
016     padding:5px 0;
017     border-radius:3px;
018     -moz-border-radius:3px;
019     -webkit-border-radius:3px;
020 }
021 /* main menu styles */
022 /* tabs section */
023 #tabs-container {
024     clear:both;
025     font-size:11px;
026     height:26px;
027     margin:0 auto;
028     padding:0
029 }
030 .tabs li {
031     float:left;
032     list-style:none;
033     position:relative
034 }
035 .tabs li a:first-child {
036     margin-left:10px
037 }
038 .tabs li a {
039     background:#f3f3f3;
040     border:none;
041     border-left:1px solid #d5d5d5;
042     border-right:1px solid #d5d5d5;
043     border-top:1px solid #d5d5d5;
044     color:#333;
045     display:block;
046     margin:0 2px 0 0;
047     padding:6px 10px 4px
048 }
049 .tabs li.active a {
050     -webkit-border-radius:4px 4px 0 0;
051     background:#fff;
052     border-bottom:1px solid #fff;
053     border-left:1px solid #d5d5d5;
054     border-radius:4px 4px 0 0;
055     border-right:1px solid #d5d5d5;
056     border-top:1px solid #d5d5d5;
057     color:#222;
058     display:block;
059     padding:6px 10px 4px
060 }
061 .tabs li.child a {
062     -webkit-border-radius:0 4px 0 0;
063     background:#f3f3f3;
064     border-radius:0 4px 0 0;
065     color:#333;
066     display:block;
067     margin:0;
068     padding:6px 10px 4px
069 }
070 .tabs li a:hover {
071     background:#fafafa;
072     border-bottom:1px solid #d5d5d5;
073     color:#fff;
074     text-decoration:none
075 }
076 /* Targeting the first level menu */
077 .tabs {
078     display:block;
079     margin:0;
080     padding:1px 0 2px;
081     position:absolute;
082     z-index:100
083 }
084 .tabs > li > a:hover {
085     background:#ececec;
086     color:#222
087 }
088 .tabs > li.active > a:hover {
089     -moz-border-radius:3px 3px 0 0;
090     -webkit-border-radius:3px 3px 0 0;
091     background:#fff;
092     border-bottom:1px solid #fff;
093     border-radius:3px 3px 0 0;
094     color:#222
095 }
096 /*Middle Drop-Down Navigation*/
097 #nav-container {
098     border-bottom:1px solid #d5d5d5;
099     border-top:1px solid #d5d5d5;
100     clear:both;
101     font-size:11px;
102     height:33px;
103     margin:0 auto;
104     padding:0
105 }
106 /* Targeting both first and second level menus */
107 .nav li {
108     float:left;
109     list-style:none;
110     position:relative
111 }
112 .nav li a {
113     background:url(images/arrow.png) no-repeat right;
114     border:none;
115     color:#222;
116     display:block;
117     margin:0 5px 0 0;
118     padding:5px 20px 5px 8px
119 }
120 /* Targeting the first level menu */
121 .nav {
122     display:block;
123     margin:0;
124     padding:5px 0 2px;
125     position:absolute;
126     z-index:100
127 }
128 .nav > li > a:hover {
129     -moz-border-radius:3px 3px 0 0;
130     -webkit-border-radius:3px 3px 0 0;
131     background:#507aa5 url(images/arrow_hover.png) no-repeat right;
132     border-radius:3px 3px 0 0;
133     color:#fff;
134     padding:5px 20px 5px 8px
135 }
136 /* Targeting the second level menu */
137 .nav li ul {
138     -moz-border-radius-bottomleft:3px;
139     -moz-border-radius-bottomright:3px;
140     -moz-border-radius-topright:3px;
141     -moz-box-shadow:1px 1px 1px #333;
142     -webkit-border-bottom-right-radius:3px;
143     -webkit-box-shadow:1px 1px 1px #333;
144     background:#507aa5;
145     border-bottom-left-radius:3px;
146     border-bottom-right-radius:3px;
147     border-top-right-radius:3px;
148     box-shadow:1px 1px 1px #333;
149     color:#222;
150     display:none;
151     margin:0;
152     padding:2px 0;
153     position:absolute;
154     width:140px
155 }
156 .nav li ul li {
157     width:100%
158 }
159 .nav li ul li a {
160     background:#507aa5;
161     border:none;
162     color:#fff;
163     line-height:25px;
164     margin:0;
165     padding:0 0 0 8px
166 }
167 .nav li ul li a:hover {
168     background:#466A90
169 }
170 .nav li ul li.strong-archive a {
171     border-top:1px solid #466A90;
172     font-weight:600
173 }
174 /* A class of current will be added via jQuery */
175 .nav li.current > a {
176     -moz-border-radius:3px 3px 0 0;
177     -moz-box-shadow:1px 1px 1px #333;
178     -webkit-border-radius:3px 3px 0 0;
179     -webkit-box-shadow:1px 1px 1px #333;
180     background:#507aa5 url(images/arrow_hover.png) no-repeat right;
181     border-radius:3px 3px 0 0;
182     box-shadow:1px 1px 1px #333;
183     color:#fff
184 }
185 /* CSS fallback */
186 .nav li:hover > ul.child {
187     display:block
188 }

Step 3. Images

Here are only one image for background of demo:

    page background

Step 4. JS

In our menu I using jQuery a little. Beside jquery.js (in ‘js’ folder), I have also:

js/script.js

01 $(document).ready(function(){
02     $('.tabs li a').click(function () {
03       $('.tabs li').removeClass('active');
04       $(this).parent().addClass('active');
05       $('.nav').hide();
06       var index = $('.tabs li a').index(this);
07       $('.nav').eq(index).show();
08       return false;
09     });
10     $('.nav li').has('ul').hover(function(){
11         $(this).addClass('current').children('ul').fadeIn();
12     }, function() {
13         $(this).removeClass('current').children('ul').hide();
14     });
15 });

This code is very simple, so I hope to not have to explain every line here.


Live Demo

Conclusion

Today we made new nice menu (seventh), Your comments and thanks are very welcomed. Good luck!

Rate article