Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

The HTML:

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  <  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 TabsSliding 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-left0;
fontbold 12px Century GothicSans-serif;
border-bottom1px solid #333;
list-style-typenone;
text-aligncenter/*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display
inline;
margin0;
}

.basictab li a{
text
-decorationnone;
padding3px 7px;
margin-right3px;
border1px solid gray;
border-bottomnone;
background-colorsilver;
color#333;
}


.basictab li a:hover{
background
-color#ddd;
color#000;
}

.basictab li a:active{
color
black;
}

.basictab li.selected a{ /*selected tab effect*/
positionrelative;
top1px;
padding-top4px;
background-color#333;
color#fff;
}

</style>
</
head>

<
body>



  <
ul class="basictab">
    <
li><a href="#">Home</a></li>
    <
li class="selected"><a href="#">News</a></li>
    <
li><a href="#">Products</a></li>
    <
li><a href="#">About</a></li>
    <
li><a href="#">Contact</a></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.
[url="http://www.oyunvar.com">varmısın yokmusun</a>
<a title="en güzel oyunlar"]oyunlar[/url]
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  <  1 2 3 4 5 >

Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.