Dynamic Drive CSS Library- CSS Tabs menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Horizontal CSS Menus: Here

CSS Tabs menu

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

At last an easy-to-adapt-example for a horizontal navigation menu that does not use


float

. This is actually the first one I see online, I think.

A lot of CSS-beginners will appreciate the simpleness of a single


display:inline

instead of the more common "floatitis": floating the

li

elements, float-to-fix the

ul

, float (and block) the

and then having to clear it all.

Posted by Peter Müller on 05/12, 04:34 AM

very nice page

Posted by DerMann on 05/16, 01:53 PM

I still can't figgure out a way to stop this wrapping though. Without using a fixed width, as the site I'm developing will be translated, as such the length of the menu items will never be consistent.

Currently still using good old tables, (still xhtml strict and css valid mind you). Css would be an ideal solution, however I've yet to find a way to creating a menu from a list, with background images that does NOT wrap.

Still looks good if you don't mind the wrapping!

Posted by Chris on 06/19, 07:55 AM

the hover color could be changed

Posted by james on 06/19, 01:26 PM

Good example...

Posted by Oztecnic on 08/10, 10:21 AM

Very nice example

Posted by Susi on 08/10, 09:26 PM

it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! how come?

Posted by fayah on 08/25, 12:38 AM

Is there any way that tabs with two or more words can show the words lined up vertically?

e.g. on the "Button maker" tab "Button" would appear above "Maker" ??

Posted by Bob on 08/29, 12:48 PM

What you got right.. is incredibly right, you put both the css and the html where we could see them fast.It would be great to have another scrollbox to "cartoon" what two or three browsers would render the code like. The annoying thing about it all is guessing what it might turn out looking like.

Posted by Teeg on 09/12, 02:54 AM

I do like tab menus and this one looks great!

Posted by kieren on 09/18, 01:39 PM

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

Commenting is not available in this weblog entry.