Dynamic Drive CSS Library- DD Color Tabs II

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

DD Color Tabs II

Author: Dynamic Drive

Based on the same design as DD Colors Tabs, this second version flips the tabs over to create an inverted look. Just like the original, you can modify the menu's default and hover colors just by altering the two color values inside the CSS code. This is made possible thanks to transparent images used as the menu tabs' interface.

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.

Demo:

The two images (resized for easier download):

The CSS:

<style type="text/css">

#invertedtabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}

#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em; /*margin between menu and rest of content*/
padding:0;
list-style:none;
}

#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}


#invertedtabs a{
float:left;
color: white;
background: #8b0000 url(media/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}

#invertedtabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}

#invertedtabs a span{
float:none;
}


#invertedtabs a:hover{
background-color: #d50509;
}

#invertedtabs a:hover span{
background-color: #d50509;
}

#invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
background-color: #d50509;
}

#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #8b0000;
border-bottom: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>

The HTML:

<div id="invertedtabsline">&nbsp;</div>

<div id="invertedtabs">
<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>

<br style="clear: left" />

Code Info

Rate this code:

Date Posted: 07/12/2006

Revision History: None

Usage Terms: Click here

Your Comments (48)

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

Very clean, very customizable, very lightweight, minimal images. A very nice, professional menu.

* I recommend this menu.

Posted by Nathan on 07/12, 08:07 PM

Good looking navigation for sure, professional look, thanks!

Posted by Ivan on 07/16, 08:47 AM

Hey .. how do I align this on center of the page ??
I tried but menu gets all messed up. I don't have problems with align on the right

Posted by David on 07/24, 06:33 AM

I would like to ask you how to make whole menu in center, instead of in left. I tried to change some coding. But couldn't let me know. Thanks.

Posted by Malik on 08/01, 12:40 PM

I tried a trick to make the menu in the center by giving visibility to hidden.
<li style="visibility:hidden;"><span>Tools</span></li>

so you can put couple of those to make the menu in the center. Don't put visibility=hidden on others.

Posted by Malik on 08/02, 10:42 AM

I like this script a lot! I'm trying to figure out how to adapt to a table row rather than as a div list. If I can't get that to work easily, I'll use the default.

Posted by Bluemoon on 08/06, 10:26 PM

very nice, user friendly, light weight to download, thanks

Posted by Tinam on 08/21, 06:29 AM

This Menu does not work and I am using Dreamweaver. Do I Absolutely need these pictures, if I do, Where do I put them so it can work?

Posted by sebhockey3 on 08/30, 06:19 PM

I like this menu. However, the highlights don't work when I select a tab (color remains the same), and I'm having a little trouble designating the first page that displays. My Home page, which is the first tab selection, doesn't display as the first page.
Any suggestions?

Posted by Janetta on 09/01, 07:16 AM

Thanks so much for posting this! Works like a charm. I too wasn't able to figure out how to center the tabs, so I fudged it by specifying a larger margin-left to "push" the tabs over so that it appears to be centered since I have a fixed page width. But I'd appreciate it if anyone comes up with a better way to do an align: center.

Thanks again!

Posted by Mari on 09/13, 10:52 AM

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

Commenting is not available in this weblog entry.