Dynamic Drive CSS Library- Shade Image Tabs Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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

Relly it is fantastic script, It can possible to easy customization. good tutorial.. Thanks a lot..

Posted by Madhu Kaleeckal on 07/25, 05:01 AM

This is a great menu system. However, my only problem is that I have a fixed width areas to show and many menu tabs.

Is there any way to add a scrolling functionality so that more tabs can be displayed in the same area using forward and backward scroll arrows (or similar) at the ends of the fixed area. The look and feel should not be disturbed.

We tried the same with layers, but the results were not very successful.

We are using ASP.Net with C#

Posted by Rajesh Machha on 07/26, 02:34 AM

When these corners will get rounded? :-)

Posted by Roman on 07/28, 01:47 PM

hi,
each time i click in tab the page load there is no way to do this only one time?
thanks

Posted by jason on 08/15, 04:27 AM

I need help, I need the content to display in the same page... (like display:none or display:block if tab is selected). Why I want to do this?... because one of the tabs is a part of a form, the form is outside the tabs... help please!

Posted by cristobal on 08/16, 09:57 AM

This does not work in some cases. How would you do it if you wanted the tabs to actively change while not sending you to another page? ie if they had information underneath them that was changing when you clicked on each one of them.

Posted by Major Konig on 08/20, 10:42 PM

thanks a lot, very useful menu and very nice,
regards

Posted by rod on 09/27, 09:57 AM

very nicve and usefull thanks a lot, regards

Posted by rod on 09/27, 09:58 AM

Yes thanks using this one!

Posted by Webindices on 10/08, 06:00 AM

Great!! work just need to know any such type of interface which is totally diffetent

Posted by Nirupam on 10/18, 03:21 AM

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

Commenting is not available in this weblog entry.