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

Dss, are you looking just to add a drop down menu to certain tabs? If so, just use Anylink CSS menu (http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm) with this CSS code. Should be plug and play basically to add a 2nd level to the tabs.

Posted by ddadmin on 06/19, 06:01 PM

Actually I'm trying to find dhtml/javascript tabs like http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm but with rouned corners like above

They would need to be OnClick rather than hover.

Posted by Dss on 06/20, 06:30 AM

So simple... So sweet...
I really like the minimalistic style. Neat way of rounding the edges. Keep 'em coming!

Posted by Torstein Nicolaysen on 06/22, 02:55 PM

How is the simplest way to let this menu align to the right of the page ?

Posted by troels on 08/18, 01:40 PM

Thank you ever so much Dynamic drive, your making my website making so much easier!!

Posted by sebhockey3 on 08/20, 12:53 PM

are the images supposed to be not there...i dont see anything inside the boxes...

Posted by Regac on 08/29, 03:09 PM

Wow! Now I can make a really great site! Thanks CSS Library!

Posted by Joseph on 09/18, 01:31 AM

Great code! Lovin' it.

I'm curious about this section:

#ddcolortabs a span{
float:left;
<snip>
}

#ddcolortabs a span{
float:none;
}

Why set the float to "left" if you just set it to "none"?

Posted by Jonah Dempcy on 09/21, 01:50 PM

How to change the color of this tab menu? i couldnt find the color code #8b0000 and #d50509.

Posted by barry on 09/21, 09:46 PM

How would I align the tabs on the RIGHT SIDE of that bar, instead of starting from left?

Posted by Q on 10/10, 03:17 AM

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