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:
Rate this code:
Date Posted: 05/07/2006
Revision History: Updated 05/16/2006 for consistent link states colors.
Usage Terms: Click here
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 >
Thank you so much for this. I am definitely using it now. Nice work.
I used. Thank you for example
Nice Example and good deatiails abut menus..
www.posintechnologies.com
www.posintechnologies.com
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.
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]
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]
I like this type of menu
nice Css .
nice Css .
Greet !
thanks you
Nice its working
Commenting is not available in this weblog entry.
.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><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>