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

A slight hack is needed for IE:



.basictab{

...

[b]margin-top:1px;[/b]

...

}

For all those who want to change the color of the css, dont ask the author of this article, just do it yourself after you copied the code.
Here's my silver version:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

  <title>Version 1 Tabs: Sliding Doors of CSS</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

  <style type="text/css" media="screen">



.basictab{

padding: 3px 0;

margin-top:1px;

margin-left: 0;

font: bold 12px Century Gothic, Sans-serif;

border-bottom: 1px solid #333;

list-style-type: none;

text-align: center; /*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: silver;

color: #333;

}





.basictab li a:hover{

background-color: #ddd;

color: #000;

}



.basictab li a:active{

color: black;

}



.basictab li.selected a{ /*selected tab effect*/

position: relative;

top: 1px;

padding-top: 4px;

background-color: #333;

color: #fff;

}



</style>

</head>



<body>







  <ul class="basictab">

    <li>Home</li>

    <li class="selected">News</li>

    <li>Products</li>

    <li>About</li>

    <li>Contact</li>



  </ul>





</body>

</html>

Posted by Eddy on 06/18, 07:52 AM

Thank you so much for this. I am definitely using it now. Nice work.

Posted by Allison on 11/14, 10:03 PM

I used. Thank you for example

Posted by Bedava Oyunlar on 12/16, 12:07 PM

Nice Example and good deatiails abut menus..

www.posintechnologies.com

Posted by posin on 12/16, 11:04 PM

Doesn't work. In Maxthon (IE), when I increase the font size with a CTRL +, then entire tabbing breaks. This is very old style CSS. Try using proper EMs or percentages so things maintain their proportion, otherwise this won't work in most modern browsers.

Posted by Eirck on 02/25, 02:21 AM

hi,
I am from turkey.
Thanks for thist god post.
<a href=http://www.oyunvar.com/10688_varmisinyokmusun.html title=varmısın yokmusun>varmısın yokmusun</a>
oyunlar

Posted by oyunlar on 03/07, 06:59 PM

I like this type of menu
nice Css .

Posted by M.M.F on 03/16, 03:48 AM

Greet !

Posted by web tasarim on 07/14, 06:54 PM

thanks you

Posted by web tasarım on 08/04, 11:52 AM

Nice its working

Posted by Chintha on 08/14, 07:08 AM

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