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

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.

ooh I don't like the colors

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





Outstanding...Simply outstanding!


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





'cmon people. really...



THE SUBMENU WILL NEVER CHANGE ON A STATIC PAGE!



If you want to see the other submenu, create another html file and modifiy the <ul class="selected"> and <li class="selected"> properties to indicate that you are now on a different page.



You can do this thru javascript, hardcoding it into the new page or change it when your backend code generates a new page.'



(jeez)


Posted by burtadsit on 09/12, 09:24 AM





I would do this differently, but nice example nonetheless.


Posted by Stefan Ashwell on 09/15, 03:20 AM





this is hard coded poor code, please go read your books and examples before posting it here like a good thing.


Posted by mowafag omer on 10/23, 05:29 AM





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

http://www.becomon.com


Posted by Visitor on 02/25, 11:18 AM




Comment Pages 3 of 4 pages  <  1 2 3 4 >







Commenting is not available in this weblog entry.





Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.