Dynamic Drive CSS Library- Two level CSS Tabs menu

CSS Library: Horizontal CSS Menus: Here

Two level CSS Tabs menu

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 (27)

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 3 of 3 pages « First < 1 2 3

I love the fact that you developers create these cool menus for us.

A note to complainers:
I don't why you complain you idiots, it's FREE.
<code>ooh I don't like the colors<code>
What the #@$K, then change them you idiot.
If you can't make it then you would break it huh.

Enough Said!

Posted by Westnmatrix on 09/25, 05:11 AM

Nice. I like it, but I would rather have it work with nested lists. Then, you're making even better semantically marked up code.

I think it's possible to fix it.
HTML:
<ul>
<li>Level One Item One</li>
<li>Level One Item Two</li>

<ul>
<li>Level Two Item One</li>
<li>Level Two Item Two</li>
<li>Level Two Item Three</li>
</ul>
</li>
<ul>

Then, with CSS, replace all:
#tabcontent
with:
li ul

I didn't actually test it out. To be honest I'm too lazy and busy right now, but you can review how it's done on CSS MaxDesign's Listamatic2

Posted by SamwiseOfTheChainring on 10/25, 05:58 PM

This horizontal expansions of the main tabs has the big advantage over the normal drop down type of expansions in that it does not hide the main text of the page when it is hovered over by the viewer.I also like the simplicity of manufacturing a site with this menu.

Posted by albufeira on 01/26, 04:03 PM

The Two level CSS Tabs menu code is great. I am having a problem showing the submenus from the other tabs. Any help with this is greatly appreciated

Posted by Mary H. on 02/26, 02:29 PM

Your site is awesome. I love it. I'm always there looking for new stuff to use. I can not tell you in words how much I appreciate you guys. I have linked to your website in 3 different pages of my website.

I'm in love with your Horizontal DD Color Tabs & it is beautiful.(the one that you are using in your own website).

Are you going to make a two level version of this DD Color Tabs in the near future? I would like to use two level version of your DD Color Tabs in my HomePage when it become available.

Thanks a lot,
Bill Dean

Posted by Bill Dean on 03/25, 07:10 PM

Posted by Naresh on 05/26, 11:17 PM

Outstanding...Simply outstanding!

Posted by William on 06/21, 11:41 PM

Comment Pages 3 of 3 pages « First < 1 2 3