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

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

This css menu is very good and I would like to use it, but it is left justified. I would like it to be CENTERED on my webpage. Can you send me a CSS code modification and brief instructions on how to do this?

Much obliged,
Joe

Posted by Joe Z on 03/28, 07:21 PM

nice - but it only looks good with a white background.

with a non-white bg, the rounded corners show up white.

is there a way to change this?

Posted by iowamf on 04/10, 11:04 AM

I tried using this code for my website. It works wonderful in IE, however in Firefox, the menu bar goes way above where it should be. why is this happening in firefox, kindly give a solution to this asap as i have to complete my project within few days. please reply urgently

Posted by imran on 05/04, 10:10 AM

I had fun with this, had no problems getting IE and FF to match up but... validation fails.

Any Ideas or suggestions?

Posted by deXetrous on 05/22, 01:34 PM

Very Nice Thanks

Posted by Andras on 05/23, 12:29 AM

WOW. I really like the CSS Library. Good coding and example.Thanks for the great site.

Posted by Saiful Adi on 05/25, 01:35 AM

http://www.bluemoonimagestudio.com/store/index.php?action=category&id=15
I have the menu on the above page i cant get the color to work when im on that page can you help

Posted by Ben on 05/30, 01:17 PM

My page is template driven so i cant just put an id at the end of it

Posted by ben on 05/30, 01:19 PM

does anyone know where i could get a vertical css menu like this one? please, if you do, email me: channel-nah@gmail.com

Posted by Channel Nah on 06/22, 01:39 AM

thanks, you are the best of free resource provider.

Posted by Midi on 07/13, 12:44 PM

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