Dynamic Drive CSS Library- DD Color Tabs

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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

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 1 of 9 pages 1 2 3 > Last »

WOW. I really like the CSS Library. Thanks for the great site, and geep up the great work!

Posted by Peter on 05/10, 05:39 AM

This is a very cool free source for ideas for web designers.

Posted by inboxnews on 05/10, 09:42 AM

Good coding and example. Can't wait to see future articles. Keep up the good work guys.

Posted by mjaleo on 05/10, 09:51 AM

Nice idea, but stop using CSS hacks! Don't teach people to use CSS hacks, because they will break in IE7 when it comes out!

Teach people to use conditional comments if you have to, but please no CSS hacks...

Posted by Robvdl on 05/10, 10:01 AM

I agree with Robvdl regarding the hacks. Another issue I noticed was that you're using in-line CSS, which is almost always a bad idea.

Similarly, you're using a style block instead of an external file.

Lastly, why are you styling


span

's instead of the anchors themselves?

Posted by Mordechai on 05/10, 10:44 AM

My mouse cursor looks like it's reloading the image on ever mouseover. Is anyone else seeing this? If so, can the image rollovers be preloaded and then set dynamically via JS?

Posted by Ivan on 05/10, 11:34 AM

While style blocks aren't always the best idea in the real world, they're often appropriate when doing testing. After everything on the page looks/works appropriately, they can be moved to an external file.

Posted by MaryV on 05/10, 01:26 PM

As far as the use of hacks, once IE7 comes out and overtakes IE6, I'll be revisiting a lot of the examples here and removing hacks as much as possible. In the meantime, I think it's important not to ignore still the largest segment of browser users out there.

Posted by ddadmin on 05/10, 03:21 PM

[S]tyle blocks...are often appropriate when doing testing.

While style blocks are sometimes usefull for initial development, by the time I'm ready for tweeking, I've long since moved them off the page. In fact, I often find it more cumbersome to edit the styles during development when they're in the html file. Perhaps this is because I use an editor for the editing and browsers for the rendering.

Dropping the point about style blocks, the bigger question still remains: Why use in-line styles?

Posted by Mordechai on 05/10, 04:36 PM

Mordechai, the only inline style used in this code pertains to:

<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li> 

The "margin-left" definition is to overcome a Opera bug that causes the first tab to not render correctly if omitted. So I consider it sort of a off the cuff fix, and hence it's defined inline.

Posted by ddadmin on 05/11, 03:19 AM

Comment Pages 1 of 9 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.