Dynamic Drive CSS Library- Shade Image Tabs Menu

CSS Library: Horizontal CSS Menus: Here

Shade Image Tabs Menu

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

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

I tried but different tabs are not highlighted when clicked, only the default one is highlighted. Can you help? Thanks.

Posted by Brian on 09/18, 02:05 AM

oh, i forgot. I changed the selector to "tabs" instead of "shadetabs".

*html .tabs li.selected

so rename .tabs to .shadetabs and it'll work ;)

Posted by pezzi on 09/18, 06:39 AM

Where you see this:



.shadetabs li.selected{

position: relative;

top: 1px;

}

If you take out the top: 1px, then that should get rid of the problem of the 1 pixel poking through... However I am not sure if this works on IE6, as I am using IE7 && Firefox.

Other than that, this is a very good tutorial, and I will be using the code. Much thanks :)

- Jordan

Posted by Jordan on 09/26, 02:04 PM

I LOVE IT! I am planning on using your tabbed interface...but need to figure out how to have it auto-rotate through the elements unless someone clicks on a tab....or pauses as they move their mouse over the content. Please let me know if that is in the works...or already available and I just didn't see it.

Thanks!

Posted by Matt on 09/26, 03:07 PM

Is it possible to align the menu verically on the left side of the page instead of on top?

Posted by Sarah on 10/02, 12:20 PM

Anyway to make the selected tab's text has a different color in IE6?

I added the color to the li.selected a, but it works in FF not in IE5

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

Posted by Howard on 10/02, 01:34 PM

Love the tab menu option. Just curious how the tab can rotates once you click on the other choices? Can anyone help?

cheers,

Posted by tee on 10/03, 01:10 AM

I love this Tabbed Menu....am hoping to use this with a Ajax content includer...which is also easy to use. What I need to figure out is how to automate the rotation of those tabs and their content...and pause that when people mouse over the content.

Posted by Matt Koenigs on 10/05, 04:07 PM

To get rid of the 1px problem, change

<code>
.shadetabs li.selected{
position: relative;
top: 1px;
}
<code>
to
<code>
.shadetabs li.selected{
position: relative;
top: 0px;
}
<code>

Posted by AJ on 10/18, 05:07 AM

If you dont use the image and would like to change the color of the selected tab add this to the css code:

.shadetabs li.selected a:visited{
background-color:#FFFFFF;
text-decoration:none;
background-color:#FFFFFF;
font-weight:bold;
}

before this you only have (li.selected a:hover) which does not change the color of the selected tab before you hover over it. hope this help somebody out there let me now if it has please. also email bj396@hotmail.com

Posted by Aaron BJ on 10/26, 05:04 PM

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