Dynamic Drive CSS Library- DD Color Tabs

CSS Library: Horizontal CSS Menus: Here

DD Color Tabs

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 (77)

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

But how can this be done in an automatic way, it change color whenever a diferent tab is selected?

Posted by Viajante on 06/13, 10:39 AM

Anyone can help on this?
How can the color of the selected tab change in an automatic way, i mean when a tab is selected it changes,for exemple, from blue to red and the previous selected tab change from red to blue being blue the general color of the tabs?

Posted by Viajante on 06/14, 03:18 AM

Viajante, dynamically selecting a tab can only be automated through server side scripting, by outputting the HTML code of the menu dynamically, with the desired tab selected (by assigning it the "current" id). How to do this is beyond the scope of this article, unfortunately.

Posted by ddadmin on 06/14, 04:27 AM

Well it´s an idea for a future update of this very good tab menu.
Thanks :)

Posted by Viajante on 06/14, 05:57 AM

By the way and if is not to much trouble for you ddadmin can you tell me how can i do the DD Color Tab work like i describe before?
I really apreciate it because it´s the only thing that i need to do to put the new version of the site that i´m working on.
Thank you :)

Posted by Viajante on 06/14, 10:43 AM

Am I missing something here? There's no images for the tabs where it says 'the two images'. Is everyone seeing that or is it just me?!!

Thank you.

Posted by Russell James on 06/16, 06:05 AM

The images are transparent, they exist just to round the corners of the tabs.

Posted by Viajante on 06/16, 10:05 AM

how do you center the buttons???

Posted by bin on 06/17, 03:06 PM

On this line

<style type="text/css">
#ddcolortabs{
margin-left: 4px;

change the value 4px to another to place the buttons where you want them.

Posted by Viajante on 06/18, 06:17 AM

Can you guys add javascript to this css menu, I've been trying for over a week to find a rounded tab dhtml menu, but my attempts to integrate the dhtml javascript tabs from other DD examples with these has been an utter failure. I would really like to get a dhtml jscript menu using non-image rounded tabs working on my site.. and they need to be able to expand dynamically as opposed to some of the image based tab menus.

Thanks

Posted by Dss on 06/19, 03:15 PM

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