Dynamic Drive CSS Library- Shade Image Tabs Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Shade Image Tabs Menu

Author: Dynamic Drive

This is an attractive "blue shading" image tab menu. The shade effect is created using two gradient background images, one for the overall tabs, and the other, for the currently "active" tab. Based partially on the Basic Tabs menu, Shade Image Tabs Menu supports three commonly requested features:

Ability to align the menu tabs "left", "center", or "right" on the page
Highlight a particular tab so it appears selected/ active,
Change the width of the tab menu (so the underline beneath it spans a length other than the entire width of the page.

Demo:

The two images (resized for easier download):

The CSS:

<style type="text/css">

.shadetabs{
border-bottom: 1px solid gray;
/* width: 90%; width of menu. Uncomment to change to a specific width */
margin-bottom: 1em;
}

.shadetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(media/shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(media/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

</style>

The HTML:

<div class="shadetabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 05/16/2006

Revision History: None

Usage Terms: Click here

Your Comments (80)

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

very nice!

Posted by IAnagui on 05/20, 08:08 PM

Very clean. It does look like the on state is off by a pixel in IE though...

Posted by T. Orion on 05/22, 11:01 PM

I noticed the offset with the "on" state in IE, though couldn't find a easy fix. The problem is with the fact that the active tab has a position of relative, which throws off IE as far as the background image positioning is concerned.

Posted by ddadmin on 05/22, 11:28 PM

Love the setup!

Newby Question:

One problem - I can't get border-bottom to display so I don't have the horizontal rule as shown.

Thanks

Posted by Kid Kool on 05/26, 03:02 PM

This is a great menu. It's very clean and looks amazing. By the way, the offset (if you're talking about the fact that the "on" tab is slightly lower than the others) is most likely supposed to be there.

Posted by Dan on 05/28, 11:44 AM

Clean and professional looking!

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

Very clean and minimalistic I love it great job you are a jedi of designers.

Posted by Jeff Jones on 06/29, 04:43 PM

It's great! after evaluating over 10-20 different tabs, it's my favorite!
However one feature i miss (or simply don;t know how to get around is: when the page is printed, I'd like to have all the tabs printed on the same page. I have setup css sheet for print, but nothing happens :( any ideas anyone?

tia! kris

Posted by kriskl on 06/30, 04:28 AM

great and thanks!

Posted by yahao on 07/07, 05:06 PM

really good :)

Posted by Custom Web Development on 07/08, 04:12 AM

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

Commenting is not available in this weblog entry.