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

this is the one! I am going to use this example in my new homepage. :))
great scripts.. thank you for helpful site.
fh

Posted by Maca on 10/11, 11:41 AM

Brilliant! Absolutely first class. Thank you very much!

Posted by Joe on 11/25, 02:08 AM

How do i align this on the right side? it is not a simple left to right. thank you

Posted by romeo on 12/06, 01:38 PM

the best free css resource on the web. Period. Been using for years- keep up the good work !!

Posted by jimmy on 01/23, 10:45 AM

Does any one know if it is possible to center the tabs (to appear in the center of the tabsline?

Posted by mark on 01/24, 09:08 AM

thanks, you are the best of free resource provider

Posted by gazete gazeteler on 02/22, 07:42 PM

I really like this menu, very elegant, but when it goes multi-row it looks messed up. I tried changing many of the margin and padding pixels, but I cannot make it work. Is there a way to do it?

Thanks

Posted by RadioD on 02/23, 04:04 PM

Great menu. Is there a way to edit so the rounded corners will show up on another background other than white. My header background is blue

Thanks

Posted by Robb on 03/09, 08:54 AM

You guys at DD are absolutely awesome! Keep up the great job in spreading the beauty of CSS.
May your site be up forever!!
God bless you!
Darian - Strong Island,N.Y

Posted by Darian B.M on 03/14, 12:40 PM

Can someone tell me how to get the menu to be centered in the page?
Any help will be much appreciated.
Thanks.

Darian

Posted by Darian on 03/21, 09:57 AM

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