Dynamic Drive CSS Library- DD Color Tabs

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

Advertise Here

CSS Library: Horizontal CSS Menus: Here

DD Color Tabs

Author: Dynamic Drive

This is a lightweight, very easy to customize image tabs menu similar to the one you see throughout Dynamic Drive. Instead of swapping between two tab images, this menu uses a unified transparent tab instead. What this means is that you can in fact change the menu and menu hover colors just by changing the two color values inside the CSS code! It doesn't get simpler than that.

The two colors used in this menu are: #8b0000 and #d50509. Just by changing these two colors, you instantly create a different theme for the menu tabs. There's no need to touch the images in any way unless your page's background image isn't white. In that case you'll have to modify the images' corners' background color so they match that of the page's.

Demo:

The two images (resized for easier download):

The CSS:

<style type="text/css">

#ddcolortabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}

#ddcolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}


#ddcolortabs a{
float:left;
color: white;
background: #678b3f url(media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;
}

#ddcolortabs a span{
float:none;
}


#ddcolortabs a:hover{
background-color: #8cb85c;
}

#ddcolortabs a:hover span{
background-color: #8cb85c;
}

#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #8cb85c;
}

#ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #678b3f;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>

The HTML:

<div id="ddcolortabs">
<ul>
<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Tools</span></a></li>	
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Forums</span></a></li>	
</ul>
</div>

<div id="ddcolortabsline">&nbsp;</div>

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History:
June 12th, 06': Fixed HTML code for separator bar height issue in IE.

Usage Terms: Click here

Your Comments (78)

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 7 of 8 pages « First < 5 6 7 8 >

Great CSS navigation menu code!

Question: How would you make the id="current" work for any page that the web site visitor is currently viewing in their browser? Thanks!!!

Posted by Gordon Rickard on 08/14, 04:19 PM

How do you display the lighter tab color (id="current") when viewing the selected page?

Posted by Gordon Rickard on 08/14, 04:22 PM

Hey, looks awsome but many peolpe asked (including me) how can you center the menu (like a blog) and the only reply i saw on the forum was playing with:

#ddcolortabs{
margin-left: 4px;

which does not work on me...any other idea? i could center the bar div using <center> on the html...but menu keeps on left or right

many thanks!

Posted by Esteban on 09/12, 09:00 AM

this is very good site for css hungry people i learned so much in this site thank u very much.

Posted by kranthi on 09/19, 08:50 AM

Great examples !
Keep up the good work !

Posted by Tom on 09/21, 02:51 AM

Hello:

Very menu..Very flexible.
I have same question as other users asked:
How to make the id="current" work for a selected page that visitor is currently viewing ?

A javascript function, if available, that can set the selected tab, would be really great!

Thanks
Tom

Posted by Tom George on 11/08, 10:39 AM

I was going to use this till i put in the code and it constantly says i'm on one tab. If you look at the demo you will notice the revised tab is a different color. it stays like that. I cant get it to change and the hover effect isn't applied to it. stil better than I can do thanks for the code!

Posted by nomma on 12/10, 03:34 AM

Menu ddcolortab not support mozilla firefox

Posted by okan on 12/16, 04:24 PM

Hi DSS,
There is DHTML counded corner without the use of image that you can use for table. I assume you may be able to use it for the the tab. Just look at this, it may be what you are looking for.
http://www.dhtmlgoodies.com/index.html?whichScript=rounded-corners

Regard

Posted by Mumtaz on 12/25, 01:00 PM

To change the white corners you have to edit the gifs.
Zoom in like 1200% and u will 3 white pixels in the left and/or right topcorner. Change those to the color of ur background.

Posted by aikrez on 01/08, 10:57 AM

Comment Pages 7 of 8 pages « First < 5 6 7 8 >