Dynamic Drive CSS Library- Shade Image Tabs Menu

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

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

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 7 of 8 pages « First < 5 6 7 8 >

It's amazing...nice work.it helped me a lot.
Thankx once again......! :)

Posted by Amit on 11/27, 10:30 AM

I need my tab to stay highlighted when my user is viewing that page. How do I change this? It looks like its suppose to do that but I am unsure now because it is not working.. Could someone help please.. Thank you

Posted by Shell on 01/08, 05:47 PM

pls hepl...how to do "button CSS on the right"
example: http://img155.imageshack.us/img155/4010/exampleyx8.png

thx ;-)

Posted by petr on 01/13, 07:03 PM

what u give here i tryed it but it's not working. selected page is not highlight. plz can u tell me.

Posted by muktha on 02/13, 10:55 PM

really good menu, thank yoıu very much.
regards

Posted by sahibinden on 04/24, 05:17 AM

choose different then...

Posted by bill on 05/09, 02:30 AM

I am using these tabs on an ajax loaded page. in IE7, these tabs all become draggable for some reason. So, if a user accidentally holds the mouse down while clicking a tab, the url of the tab clicked opens in the whole browser window, i.e. the pretty div box that it sits in disappears, tabs disappear. Is this an IE7 bug? feature? and, is there a way to disable this? Thanx for any help!

Posted by nk on 07/18, 06:57 AM

QUESTION: If the content of the tabs is long (American History Part One, American History Part Two, Geography of the Americas, etc.) and my display column is 2/3 wide, then the tabs wrap around and overlap each other so that the bottom half of the back row is covered. How can I move the front row down so the back row is revealed? How can I ensure that the last tab does not wrap but begins on the next line if it will not fit on one line?

Posted by Al on 07/18, 11:06 AM

QUESTION: How can I move the front row down so the back row is revealed? How can I ensure that the last tab does not wrap but begins on the next line if it will not fit on one line?

sample here:
http://www.mayocafe.com/tab/index.html

Thanks!

Posted by Al on 07/18, 11:09 AM

hi,
how to make size bigger and use images in it?

vj

Posted by vj on 07/21, 03:20 AM

Comment Pages 7 of 8 pages « First < 5 6 7 8 >