Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

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:

The HTML:

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

hey guys, i'm struggling alot with css codes and i've tried inserting these codes but the tabs just dont appear. the links appear but no tabs shown. i've already saved the images and i've got no idea what's wrong. somebody savveee meee!!!
Posted by noi on 01/09, 11:40 AM
these ungrateful comments are useless, if expressed in name-calling or dislike without any COHERENT reason other than "it sucks". Grow up and present better solutions if your sooooooo elite.

thank u for your time
Posted by Deroeik on 01/09, 04:43 PM
I added a ton of effects (current, hover, etc...) and now the menu stretches across the entire available width. What's wrong?
.navigation ul {
margin
0;
padding0;
list-
stylenone;
}
.navigation li {
float
right;
background-imageurl('images/nav.jpg');
background-positionright bottom;
background-repeatno-repeat;
background-color#272212;
height50px;
padding-left0px;
padding-top0;
padding-bottom0;
font-familytrebuchet ms"Lucida Sans"Verdanasans-serif;
font-sizelarge;
margin-left5px;
}
.navigation a {
display
block;
background-imageurl('images/navleft.jpg');
background-positionleft bottom;
background-repeatno-repeat;
height50px;
font-familytrebuchet ms"Lucida Sans"Verdanasans-serif;
font-sizelarge;
color#3e5c19;
padding-left15px;
padding-right55px;
}
a {
font
-familytrebuchet ms"Lucida Sans"Verdanasans-serif;
color#3e5c19;
text-decorationnone;
}
.navigation li a:hover {
color
#80BD33;
}
.navigation #current {
background-imageurl('images/nav_current.jpg');
}
.navigation li:hover {
background
-imageurl('images/nav_hover.jpg');
background-positionright bottom;
background-repeatno-repeat;
Posted by MarioGamer99 on 01/15, 11:37 AM
^That's only in IE. Typical.^
Posted by MarioGamer99 on 01/15, 12:17 PM
Mario,
Can you please send me the URL, so that i can see it live and suggest you the best go.
Posted by Sasi on 01/16, 08:39 AM
Noi,
Can you please send me the URL, so that i can see it live and suggest you the best go.
Posted by Sasi on 01/16, 08:41 AM
Sorry, the host just shut down. Can I have your email address?
Posted by MarioGamer99 on 01/16, 09:18 AM
Okay, I decided to rewrite the CSS, and the problems gone. I started from the plain tabs, and wrote. And wrote. And wrote. Away from a computer, and now it works!
Posted by MarioGamer99 on 01/19, 02:03 PM
>> Is it just me or are there simpler ways to do this?

There is always simpler ways ! I like this menu. It is small, simple and clean.
Posted by Frank on 02/10, 06:37 PM
Great Design.
Posted by Thangaman on 03/01, 06:49 AM

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


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