Dynamic Drive CSS Library- Two level CSS Tabs menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Two level CSS Tabs menu

Author: Dynamic Drive

Building on a regular CSS Tabs Menu, this CSS menu supports second level content that can be associated with specific tabs. By giving both a tab and the desired sub content a class of "selected", the sub content becomes visible on the page.

Demo:

The CSS:

<style type="text/css">

#maintab{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
}

#maintab li{
display: inline;
margin: 0;
}

#maintab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: black;
background: white;
}

#maintab li a:hover{
color: navy;
background: #EFFADC;
}

#maintab li.selected a{ /*selected main tab style */
background-color: #EFFADC;
border-color: navy;
}

#tabcontent{ /*2nd level content wrapper*/
border: 1px solid #778;
background-color: #EFFADC;
height: 100% /*IE7 beta2 fix*/
}

#tabcontent ul{
padding: 0;
margin: 0;
list-style-type: none;
display: none;
}

#tabcontent ul li{
display: inline;
}

#tabcontent ul.selected{ /*selected 2nd level content*/
display: block;
}

#tabcontent ul li a{
border-right: 1px solid #778;
color: navy;
padding: 2px 5px;
display: block;
float: left;
text-decoration: none;
}


#tabcontent ul li a:hover{
background-color: #D3F1A0;
color: blue;
}

.clearfix:after{ /*Clear floats hack: http://positioniseverything.net/easyclearing.html*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix{
display: inline-table;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


</style>

The HTML:

<ul id="maintab">
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>

<div id="tabcontent" class="clearfix">

<!--Sub Content #1 -->
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm">Revised</a></li>
</ul>

<!--Sub Content #2 -->
<ul class="selected">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li>
</ul>

</div>

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (32)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 4 pages 1 2 3 > Last »

Its great except for one thing -- there is no hover support. If I could have on thing for Christmas, it would be this script but with the ability to hover over the other options and see their submenus as well. If anyone knows how to do that, I would appreciate it!

Posted by Alexander DiCaprio on 06/07, 04:03 PM

Nice, I just don't like the colors...

Posted by Matt on 06/11, 12:07 PM

This homepage is rly nice

Posted by freak on 07/05, 09:52 AM

Nice looking menu. I'm sure I'll use it on one of my future sites.

Posted by Hrvoje on 07/22, 11:49 PM

Thanks very much. I will be using this menu on my next site. I love the fact you can change colours without the use of images. I am looking forward to the conditional code for when IE7 comes out.

Posted by Liz on 07/23, 05:49 AM

Dosn't go into very much detail just the code, this dosn't keep me on the page very long...

Posted by Justin on 08/12, 11:26 PM

the example does not work? how to get the second level menu shown while click/select the first level menu (show the home,new,revised submenu)? Please advised. Thanks

Posted by mill on 08/20, 03:17 AM

For Justin > the submenu that is shown is the one who will have the class "seleceted" in th ul.

You juste should make a onmouseover switch class to make it run right.

Posted by az on 09/03, 01:55 AM

i was told it could not be done. thank you.

Posted by lisa on 09/15, 12:37 PM

Awesome!!

Posted by harimurti on 11/24, 04:01 AM

Comment Pages 1 of 4 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.