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

CSS Tabs menu

Author: Dynamic Drive

This is a basic CSS tabs menu, created from an ordinary HTML list. The menu supports two common requests- the ability to align the menu "left", "center", or "right" on the page, plus highlight a particular tab so it appears selected.

Demo:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: Updated 05/16/2006 for consistent link states colors.

Usage Terms: Click here

Your Comments (42)

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 »

how can you make the menu in the digg.com site
http://digg.com/tech_news/Welcome_to_Rigg_com_Proof_that_Digg_is_Rigged/who
Posted by Ayodele on 09/22, 04:27 PM
hi,
this is gra8 but please change color in demo
make it silver for (.basictab li a{)
and white for Hover and Select
then only u can use it anywhere
Thanks
Manish Bansal
Posted by manish on 12/16, 03:07 PM
Hi,
If I have multiple pages, do I need to copy the same menu code for every page?
Is there a way to put the menu code in one separate file and then call it as I need?
Thanks.
Posted by Cloud on 01/19, 11:23 AM
hey buddy, you can always create an header file using php, if you are familiar with PHP coding... it's the simplest way to do that.. check on http://www.sitepoint.com/ OR http://www.phpfreaks.com

Take care buddy..

Ayo
Posted by Ayodele Okeowo on 01/20, 10:37 AM
macamana nak bagi pergi tengah skit or in english how can i change the padding make it litle bit center. www.hartanah2u.com
Posted by budin on 02/11, 12:22 AM
i cant make the underline to appear and the menu looks like flotating, can someone answer me that?
Posted by Isaac on 02/11, 12:59 PM
I like this menu. However, i canīt make it work when i select other tab (color/properties remains the same). How can i customize this CSS code?
Posted by jo on 02/12, 10:48 AM
My bottom border is sitting about 10 px away from the tabs. What am I missing? I first tried to implement the tabs in a table, but even if they are outside of the table I get the same effect.
Posted by Tom on 02/14, 11:12 AM
This is Excellent. Some additional and similar CSS techniques can be found at css.maxdesign.com.au/listamatic/
I hope people find it useful and CSS menu becomes order of the day!
Posted by Mamboraj on 02/14, 11:52 AM
Your tab rocks!
Posted by JM on 02/22, 06:30 PM

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


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