Dynamic Drive CSS Library- CSS Tabs menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

CSS Tabs menu

Author: Dynamic Drive

This is a basic CSS tabs menu, created from an ordinary HTML list. The menu supports two common requests- the ability to align the menu "left", "center", or "right" on the page, plus highlight a particular tab so it appears selected.

Demo:

The CSS:

<style type="text/css">

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}

</style>

The HTML:

<ul class="basictab">
<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>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
</ul>

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: Updated 05/16/2006 for consistent link states colors.

Usage Terms: Click here

Your Comments (42)

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

how can you make the menu in the digg.com site
http://digg.com/tech_news/Welcome_to_Rigg_com_Proof_that_Digg_is_Rigged/who

Posted by Ayodele on 09/22, 04:27 PM

hi,
this is gra8 but please change color in demo
make it silver for (.basictab li a{)
and white for Hover and Select
then only u can use it anywhere
Thanks
Manish Bansal

Posted by manish on 12/16, 03:07 PM

Hi,
If I have multiple pages, do I need to copy the same menu code for every page?
Is there a way to put the menu code in one separate file and then call it as I need?
Thanks.

Posted by Cloud on 01/19, 11:23 AM

hey buddy, you can always create an header file using php, if you are familiar with PHP coding... it's the simplest way to do that.. check on http://www.sitepoint.com/ OR http://www.phpfreaks.com

Take care buddy..

Ayo

Posted by Ayodele Okeowo on 01/20, 10:37 AM

macamana nak bagi pergi tengah skit or in english how can i change the padding make it litle bit center. www.hartanah2u.com

Posted by budin on 02/11, 12:22 AM

i cant make the underline to appear and the menu looks like flotating, can someone answer me that?

Posted by Isaac on 02/11, 12:59 PM

I like this menu. However, i can´t make it work when i select other tab (color/properties remains the same). How can i customize this CSS code?

Posted by jo on 02/12, 10:48 AM

My bottom border is sitting about 10 px away from the tabs. What am I missing? I first tried to implement the tabs in a table, but even if they are outside of the table I get the same effect.

Posted by Tom on 02/14, 11:12 AM

This is Excellent. Some additional and similar CSS techniques can be found at css.maxdesign.com.au/listamatic/
I hope people find it useful and CSS menu becomes order of the day!

Posted by Mamboraj on 02/14, 11:52 AM

Your tab rocks!

Posted by JM on 02/22, 06:30 PM

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

Commenting is not available in this weblog entry.