Dynamic Drive CSS Library- DD Color Tabs II

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

Is it possible to add drop down functionality since it is using structured link?

Posted by Ryan on 05/10, 07:29 PM

Love it, love it, love it! Wonderful, works great, very customizable, thanks!

Posted by Dan on 05/15, 06:28 PM

Am I supposed to copy and download the image files somewhere else fro my personal use?

Posted by Rob on 05/18, 09:37 AM

I dont know why but whit Safari (mac web browser) a big space between

<div id="invertedtabsline"> </div>

and

<div id="invertedtabs">

But no
in the script. Om the other side, on pc browser, no space is visible...

Do you have any idea??

Posted by Philippe H on 05/21, 12:58 PM

How come when I try this on my myspace it doesent work? It works on when I do it on notepad but not on myspace.

Posted by James on 07/31, 10:59 AM

Hi,

How can i move these tabs to the center???

Posted by salar on 08/04, 04:52 AM

test test test

Posted by Peter on 10/18, 05:11 AM

is there way to make it with 2 horizntal level

thanks

Posted by Basim on 11/24, 04:23 PM

I like this menu and the solidblock menu. Is it possible to have the tabs/blocks each highlight with a different color when mouseover? (ex. one blue, one green etc.)

Posted by FEC on 12/19, 02:12 PM

Your tab menu is simply beautiful. Its simple, elegant and absolutely smashing. Just cant tell you how much I love it and appreciate it. Thanks very much.

Posted by Indranil Banerjie on 02/16, 09:09 PM

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