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

To center all you do is add the code between <center>code here</center>

like this

<center><div id="navigation">
<li><span>CSS Gallery</span></li>
<li><a href=""><span>Javascript</span></a></li>
Posted by edub9 on 03/01, 12:01 PM
I like that sort of menu. I'd just add some :hover or OnMouseOver stuff. Good work!
Posted by mor_th on 03/14, 08:19 PM
I appreciate EVERYTHING Dynamic Drive is doing to assist in creating web pages! Keep up the good work.
Posted by Paula on 03/15, 04:38 PM
really nice. thanks a lot for this one!
Posted by arje on 04/12, 05:11 AM
for any information of suggestions please contact me @
Posted by Sasi on 05/21, 05:23 AM
This example, posted by Sasi Kiran, is an elegant solution to making a menu. For me, this was a perfect introduction to CSS. I had been looking for a simple way to produce menus using current standards, and this was it. I have put it right onto my new website, as I am sure millions of others will.

Posted by John Bartley on 05/28, 10:54 PM
Superb good my friend!
Well are talent!
Posted by Harry on 06/05, 02:35 AM
tabs are always useful I think
Posted by Ders on 08/20, 06:12 PM
wery nice
Posted by projektowanie stron internetowych on 09/26, 12:23 PM
I'm trying to use these tabs, but I need the left and right background images to be transparent (because I have a background image behind the tabs). I edited them so the corners are transparent instead of white, but I've run into a problem.

Because I made the corners transparent, part of the greenbg background shows through the transparent spot, ruining the rounded tab effect. Is there a way to fix this?
Posted by redwall_hp on 10/17, 07:27 PM

Comment Pages 4 of 5 pages « First  <  2 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.