Dynamic Drive CSS Library- Plastic Tabs menu

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Horizontal CSS Menus: Here

Plastic Tabs menu

Author: Sasi Kiran/ Tab images by Dynamic Drive

This is a no frills, "plastic looking" tabs menu. The entire menu can be aligned either to the left or right of the page, by setting the menu's float attribute accordingly.

Demo:

The three images used:

The CSS:

<style type="text/css">

#navigation {
text-align: center;
float: right; /*Set to "left" or "right" to position menu accordingly*/
/*border-bottom: 1px solid #999e87; uncomment this line to add bottom border*/
}
#navigation ul {
	font-family: Verdana;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	margin: 0;
	padding: 0;
	list-style:none;	
}
#navigation li {
	display: inline;
	background: url(media/greenbg.gif) repeat-x center top;
	text-align: center;
	padding: 0;
	margin-right: 4px;	
	float: left;
}
#navigation a {
	color: #663300;
	background: url(media/greenleft.gif) no-repeat left top;
	float: left;
	margin:	0;
	padding-left:7px;
	text-decoration: none;
}
#navigation a span {
	background: url(media/greenright.gif) no-repeat right top;
	display: block;
	padding:7px 13px 4px 5px;
}
#navigation a span {
	float: none;
}

</style>

The HTML:

<div id="navigation">
<ul>
<li><a href="http://www.dynamicdrive.com/"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/"><span>CSS</span></a></li>
<li><a href="http://www.dynamicdrive.com/forums/"><span>Forums</span></a></li>
<li><a href="http://www.cssdrive.com/"><span>CSS Gallery</span></a></li>
<li><a href="http://www.javascriptkit.com/"><span>JavaScript</span></a></li>
</ul>
</div>

<br style="clear: both" />

Code Info

Rate this code:

Date Posted: 06/27/2006

Revision History: None

Usage Terms: Click here