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

Any idea for how to use the current tabs with IFRAMES?

Posted by Occasio on 05/12, 07:51 PM

ddadmin:
Why not use the :first-child?



#ddcolortabs li:first-child {

margin-left: 1px;

}

Posted by Judofyr on 05/14, 04:33 AM



#ddcolortabs li:first-child {

margin-left: 1px;

}

^^ Works great. Aside from that, out of the box, I was having issues with the tabs spanning on top of one another, as well as the LAST tab not being "clickable" in the most recent Opera.

I ended up cleaning up the CSS a bit to make it all work. Either way, thanks for the idea and examples.

When can we expect v1.1 ? ;)

Posted by Mike Reid on 05/17, 03:39 PM

Too bad this is the one used on DD already. Most people who care about what your menus look like will recognize it.

A great script none-the-less.

Posted by Nathan on 05/29, 10:07 AM

Dynamic Drive is the best ever!

Posted by litew8 on 06/05, 06:35 AM

I really want this theme but there seems to be some real big problems with IE. I have my menu working great in firefox but the border-top which shows the white line between the bottom bar and menu is about 15px on IE but normal on ff.

Any one know the problem?

Posted by dave on 06/11, 05:16 AM

Hi Dave:
The problem with the bar height in IE can quickly be fixed by adding a blank space inside the DIV for the bar. I've updated the HTML code above for this.

Posted by ddadmin on 06/12, 11:53 AM

nice one. thanks.

keep up the good work.

Posted by dave on 06/12, 11:56 AM

One problem is that when i select a tab it should change color to say that was the selected tab but it doesn´t, only the tab that as id="current" stays in a diferent color.
How can i make tabs change color when they are selected and the others stay in the another color?

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

just change the id of the page that is selected. so move the id="current" to the selected page on that page.

Posted by dave on 06/13, 10:35 AM

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