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 2 of 5 pages < 1 2 3 4 > Last »

I like all these examples. And I appreciate you all posting them.

Does anyone know how to make the currently selected tab appear as if it is on top by changing the gifs?

btw: I think if you guys are going to complain about an example you should post your "improved code" so we can all learn.

Posted by Jon on 09/11, 02:30 PM

I've actually done that before with javascript, by swaping out images on either side of the tab with ones that make it apear on top, though this was back in html 4 days, I'm not sure if you could do it with pure xhtml/css but I'm sure someone would come up with something.

Posted by Jesse Donat on 09/11, 04:09 PM

hi
i have to give in where my pics are uploaded in this line

background: url(media/greenright.gif) no-repeat right top;

could you pleas explain how i have to insert the path
only http://
or <img src="http;//

Posted by jochen on 09/19, 06:23 AM

[i]in reply to kiran shaikh[i]

To hide an admin, you'd would have to not actually send it in the code to ppl who werent administrators. This can only really be done with server side scripting such as ASP (active server pages) or PHP.

Posted by henry on 10/28, 06:06 PM

in reply to kiran shaikh

to do this you would have to use server side scripting such as ASP or PHP so that the link would not even be sent as part of the html to someone who wasnt an administrator

Posted by psychohagis on 10/28, 06:13 PM

I photoshoped the base images to fit my particular needs and it works like a charm.

Thanks for making this code available!

Posted by Claude Gelinas on 12/05, 01:14 AM

I don't care what others say about this menu. I think its great and I thanks people who shares what they do for gratis.

Thanks man!!!

Posted by Jake on 12/12, 12:30 AM

I love this menu iam going to use this on my site

Posted by dotnet on 12/14, 09:03 AM

in reply to kiran shaikh,

Did you get your problem solved??

Do let me know if you need any kind of assitance

Posted by Sasi on 12/19, 04:44 AM

Hi Kiran Shaikh I use it with PHP and to hide some links to normal users I use a normal if
(e.c.)
if(isset($_SESSION['access_lvl'] > 1)){
<li>bla bla bla</li>
}
And it works just great!

Posted by Antonio on 12/19, 12:56 PM

Comment Pages 2 of 5 pages < 1 2 3 4 > Last »