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

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

eyvallah on numara olmus fiyat diyor bunu

Posted by Fiyat on 08/15, 09:10 AM

love the menu script, but for some reason i can't get the selected page function to work. been pulling out what little hair i have left. would really appreciate some feedback. thanks.

here's the code i'm using:

.shadetabs{
border-bottom: 1px solid gray;
width: 84%;
margin-bottom: 1em;
}

.shadetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: 9px Verdana;
list-style-type: none;
text-align: center;
}

.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(../image/shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: blue;
}

.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(../image/shadeactive.gif);
border-bottom-color: white;
}

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

the list code is in a .js file could tat be my problem?????

OneLove, OneHeart
Amari

Posted by Amari on 08/25, 01:16 PM

If you change the

<div class="shadetabs"></div>

to

<span class="shadetabs"></span>

then the tabs will rest directly on top of the next HTML, instead of spaced slightly above.

Posted by Joe on 10/11, 04:28 AM

Nice tutorial
thanks

Posted by Salim on 10/24, 02:35 AM

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