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 (45)

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

Dear redwall_hp,

I'm unable to locate the problem you are explaining, can you please provide me any reference URL.

Posted by Sasi on 10/23, 04:23 AM

everything is working for me just that I'm not getting the plastic tab effect behind the link titles.
Just picture the tabs with no fancy green tab behind it and that's what I've got.
I have saved all the required pictures and saved them as you named them and as COMPUTERSERVE (GIF) in the same folder as my Webby.

Pls tell me what's going wrong (Just getting started in all this =P.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#navigation {
text-align: center;
float: right; /*Set to "left" or "right" to position menu accordingly*/
border-bottom: 1px solid #999e87;
}
#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/greenleft.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;
}

Posted by Alex Sayes on 01/21, 10:25 AM

Please place all the images in media folder, not in the parent directory.

Posted by Sasi Kiran on 03/14, 01:18 AM

http://marta.informe.com/forum/announcement-f5/
http://dimm.informe.com/forum/video-f5/
http://dimm.wikidot.com
http://jared.informe.com/forum/sex-f5/
Hi,
I tried this plastic horizontal tab menus, it worked fine for me but i was wondering how can we make certain buttons like (administrator button) invisible from users.

I am waiting for urgent reply

Thanks
Kiran

Posted by mashaka on 04/20, 05:48 PM

I inserted a hover effect to make the three images used change color on rollover, but it's not working in IE6.

Any thoughts?

Posted by Austin on 04/21, 06:14 AM

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