Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

Demo:



The two images (resized for easier download):

The CSS:

The HTML:

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 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
could you help me change the default tab please.
Ex: I have tab1 as default but I want to be able to change it to tab2 .


Highly appreciate the reply.
Posted by Tanya on 12/29, 07:41 AM
this is nice......simple and easy to implement... :)
Posted by Iqbal on 01/14, 03:20 AM
i have one question ur defaultly setting selected class to Css page
<li class="selected">CSS</li>

if we want to set dynamic, how to do that. any one can reply me.
Posted by apeed on 03/13, 06:38 AM
Perfect. Very clean.
Posted by DJ Shah on 04/28, 10:53 AM
Nice one. I like the design.
Posted by babu on 05/15, 03:31 PM
This is one excellent looking theme. It really does have some nice features. Great work!

http://www.thinkflick.com/freebies/apple-mac-style-image-gallery/
Posted by Wpdigger on 06/02, 10:59 PM

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

Commenting is not available in this weblog entry.
Copyright 2006-2008 Dynamic Drive Read our Usage Terms before using any of the CSS codes.
Dynamic Drive DHTML and CSS Code Library