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

At last an easy-to-adapt-example for a horizontal navigation menu that does not use
float 
. This is actually the first one I see online, I think.

A lot of CSS-beginners will appreciate the simpleness of a single
display:inline 
instead of the more common "floatitis": floating the
li 
elements, float-to-fix the
ul 
, float (and block) the
and then having to clear it all.
Posted by Peter Müller on 05/12, 04:34 AM
very nice page
Posted by DerMann on 05/16, 01:53 PM
I still can't figgure out a way to stop this wrapping though. Without using a fixed width, as the site I'm developing will be translated, as such the length of the menu items will never be consistent.

Currently still using good old tables, (still xhtml strict and css valid mind you). Css would be an ideal solution, however I've yet to find a way to creating a menu from a list, with background images that does NOT wrap.

Still looks good if you don't mind the wrapping!
Posted by Chris on 06/19, 07:55 AM
the hover color could be changed
Posted by james on 06/19, 01:26 PM
Good example...
Posted by Oztecnic on 08/10, 10:21 AM
Very nice example
Posted by Susi on 08/10, 09:26 PM
it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! it doesnt work! how come?
Posted by fayah on 08/25, 12:38 AM
Is there any way that tabs with two or more words can show the words lined up vertically?

e.g. on the "Button maker" tab "Button" would appear above "Maker" ??
Posted by Bob on 08/29, 12:48 PM
What you got right.. is incredibly right, you put both the css and the html where we could see them fast.It would be great to have another scrollbox to "cartoon" what two or three browsers would render the code like. The annoying thing about it all is guessing what it might turn out looking like.
Posted by Teeg on 09/12, 02:54 AM
I do like tab menus and this one looks great!
Posted by kieren on 09/18, 01:39 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.