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

Really really similar to a lot of the other menus...
Posted by Nathan on 06/26, 09:33 PM
Yeah, the code for this one is basically the Sliding Doors technique. Still, I thought it was worthy of featuring, especially with the alternate style the tab images bring.
Posted by ddadmin on 06/26, 10:28 PM
Sliding Doors without any hover effect... useless...
Posted by Andrea on 06/27, 02:37 AM
~Would be at least better with a current page attribute.
Posted by InsideLine on 06/27, 10:09 AM
"Sliding Doors without any hover effect... useless..."

Only "useless" if you want tab color to change. This is a perfect example of a simple, elegant menu where you can set just the link color to change.

It's also great b/c there's no fixed width to the tabs - you can have as much text in there as you want. I don't think Sliding Doors can do that, unless you went through a bunch of extra work and wrote a bunch of extra code.
Posted by Tom on 07/12, 01:22 PM
"It's also great b/c there's no fixed width to the tabs - you can have as much text in there as you want. I don't think Sliding Doors can do that, unless you went through a bunch of extra work and wrote a bunch of extra code."

Sliding Doors can have any text (even dinamically asigned), because was designed for it.
Posted by Fausto on 07/13, 02:42 PM
This is great; providing best-practice knowledge and resources to the general masses. Bitchin'. Big plus! Some comments posted, sound like they are coming from anal-retentive Web folk (like me) - loosen up and give this site credit for what it's trying to do, and that is in trying to help the overall, best practice Cause for the Web.
Posted by Manuel on 07/21, 09:56 PM
How do you get this in the middle of the page?
Posted by Paul on 07/25, 06:03 AM
Is it just me or are there simpler ways to do this?
Posted by Jesse Donat on 08/02, 01:33 AM
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 Kiran Shaikh on 09/05, 01:52 PM

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


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