Dynamic Drive CSS Library- Plastic Tabs menu

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/26/2006

Revision History: None

Usage Terms: Click here

Your Comments (47)

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

To center all you do is add the code between <center>code here</center>

like this

<center><div id="navigation">
<ul>
<li>Home</li>
<li>CSS</li>
<li>Forums</li>
<li>CSS Gallery</li>
<li><a href="http://www.javascriptkit.com/">Javascript</a></li>
</ul>
</div></center>

Posted by edub9 on 03/01, 12:01 PM

I like that sort of menu. I'd just add some :hover or OnMouseOver stuff. Good work!

Posted by mor_th on 03/14, 08:19 PM

I appreciate EVERYTHING Dynamic Drive is doing to assist in creating web pages! Keep up the good work.

Posted by Paula on 03/15, 04:38 PM

really nice. thanks a lot for this one!

Posted by arje on 04/12, 05:11 AM

for any information of suggestions please contact me @ sasikiran_1981@rediffmail.com

Posted by Sasi on 05/21, 05:23 AM

This example, posted by Sasi Kiran, is an elegant solution to making a menu. For me, this was a perfect introduction to CSS. I had been looking for a simple way to produce menus using current standards, and this was it. I have put it right onto my new website, as I am sure millions of others will.

Thanks!!

Posted by John Bartley on 05/28, 10:54 PM

Superb good my friend!
Well done.you are talent!

Posted by Harry on 06/05, 02:35 AM

tabs are always useful I think

Posted by Ders on 08/20, 06:12 PM

wery nice

Posted by projektowanie stron internetowych on 09/26, 12:23 PM

I'm trying to use these tabs, but I need the left and right background images to be transparent (because I have a background image behind the tabs). I edited them so the corners are transparent instead of white, but I've run into a problem.

Because I made the corners transparent, part of the greenbg background shows through the transparent spot, ruining the rounded tab effect. Is there a way to fix this?

Posted by redwall_hp on 10/17, 07:27 PM

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