Dynamic Drive CSS Library- CSS Tabs menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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

The script works great in IE 7.0.5730.11 but not in Firefox 2.0.0.16.

The tab for the selected page works but the other tabs do not:

www.carleton.ca/~barker/mbbib/

Any thoughts?

Thanks.

Mike

Posted by Mike on 08/26, 10:43 AM

Nice tab menu :D

Posted by Stefan Ashwell on 09/15, 04:39 AM

Superb! working nicely! thanks a lot!

Posted by anitha on 09/17, 05:23 AM

Thanks for making such a great tool available for us to use! I'm looking forward to trying out the tabs on my site.

Posted by Addict Free on 09/25, 11:34 PM

great code thanks...

Posted by Oyunlar1 on 09/26, 06:17 PM

nice tab menu but dosen't support IE8,nice for FF3.

Posted by caretta on 12/06, 04:32 PM

thanks a lot..

Posted by Oyun on 12/18, 09:21 PM

Great tab menu!
Easy to understand and to modify. Thanks a lot!

@Mike
I think you will need some Javascript or another scripting language (PHP,ASP, ROR) to do the selected trick.

Posted by Arthur on 12/29, 08:07 AM

thanks for

Posted by bedava oyunlar on 05/05, 04:16 PM

thanks
http://www.guzelokey.com

Posted by guzelokey on 05/19, 01:19 AM

Comment Pages 4 of 5 pages « First < 2 3 4 5 >

Commenting is not available in this weblog entry.