Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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.


The three images used:

The CSS:


Code Info

Rate this code:

Date Posted: 06/26/2006

Revision History: None

Usage Terms: Click here

Your Comments (48)

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: */

#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;
#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;
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
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

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
Look at this anal
Posted by anal on 07/28, 04:03 PM
Nice code...
Is it working on iphone?
Posted by בניית את on 08/14, 04:31 AM
Thank You! it works fine ;-)
Posted by Patrick on 03/13, 02:28 AM

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

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.