Dynamic Drive CSS Library- DD Color Tabs II

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

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

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 3 of 5 pages « First < 1 2 3 4 5 >

Very useful code snippet!
keep it up!

Posted by daniel on 12/03, 10:09 AM

This is my favourite menu. Well done!

Posted by Beatbox on 12/22, 10:24 AM

Very cool! I've installed DD Color Tabs II in my site http://www.fototoscana.it

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

Good stuff for joomla design

Posted by saosangmo on 02/03, 03:15 AM

I am not a graphic designer and this is what I was looking for. This is awesome and would recommend to any programmer out there who finds graphic designing time-consuming. Thanks alot Dynamic Drive.

Posted by Prosper on 02/07, 02:38 PM

The selected tab seems to wrap the remaining tabs oddly when different screen resolutions/sizes are in use. I have a menu which goes from end to end on 1280 by 1024, and when altered to 800 by 600 everything goes wacky. The tabs which lay beyond the highlighted link fall beneath it to the right on the next line and those beneath it to the beginning of the left. It looks like this (sort of):
Key
[H ]= Highlighted Tab
[==]= Normal Tab
| = End of Page

|[==][==][H ][==][==][==]|<-end of page(wrap point)
| BLANK SPACE[==][==][==]|
|[==][==][==] |

Could they maybe file to the left, or center somehow? it throws off the layout completely.

Posted by ahhhhh on 03/07, 06:01 PM

how to change color?

Posted by jesper on 03/25, 02:15 PM

Good stuff for joomla design. Tour4vip

Posted by tour4vip on 04/02, 04:36 PM

Great Menu, i have not put it to use yet, but I was just wondering about the images. The color_tabs_left2 is shown to have a true dimension of 9 x 2000. Is this an error? The actual image download is 9 by 200.

Posted by Boggs on 04/16, 11:37 AM

Jesper, you need to change color or background-color. For Example background-color: #d50509 , change this to another color, for example if you want white #FFFFFF would be good.

Posted by Özel Ders Kurs on 04/17, 02:40 PM

Comment Pages 3 of 5 pages « First < 1 2 3 4 5 >