Dynamic Drive CSS Library- Glowing Tabs Menu

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Horizontal CSS Menus: Here

Glowing Tabs Menu

Author: Dynamic Drive

Glowing Tabs Menu uses a background image that accentuates the outline of the tabs. And to jazz it up, the selected tab "glows", by using the "Sliding Doors" technique to shift the original background image upwards to reveal the glowing version of the tab design. An exquisite yet professional looking horizontal menu.

Demo:

The two image used:

Dimensions- 300px by 163px

The CSS:

<style type="text/css">
    
#glowingtabs{
width:100%;
font-size:90%;
line-height:normal;
overflow: hidden;
border-bottom: 1px solid #7e9fff; /*Add border strip to bottom of menu*/
}

#glowingtabs ul{
float:left;
list-style-type: none;
margin:0;
margin-left: 5px; /*Left offset of entire tab menu relative to page*/
padding:0;
}

#glowingtabs li{
display:inline;
margin:0;
padding:0;
}

#glowingtabs a{
float:left;
background:url(media/glowtab-left.gif) no-repeat left top;
margin:0;
margin-right: 5px; /*spacing between each tab*/
padding:0 0 0 9px;
text-decoration:none;
}

#glowingtabs a span{
float:left;
display:block;
background:url(media/glowtab.gif) no-repeat right top;
padding: 4px 12px 2px 3px;
font-weight:bold;
color:#3B3B3B;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#glowingtabs a span {float:none;}
/* End IE5-Mac hack */

#glowingtabs a:hover span {
color: black;
}

#glowingtabs #current a{ /*Selected Tab style*/
background-position:0 -82px; /*Shift background image up to start of 2nd tab image*/
}

#glowingtabs #current a span{ /*Selected Tab style*/
background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/
color: black;
}

#glowingtabs a:hover{ /*onMouseover style*/
background-position:0% -82px; /*Shift background image up to start of 2nd tab image*/
}

#glowingtabs a:hover span{ /*onMouseover style*/
background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/
}

</style>

The HTML:

<div id="glowingtabs">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li id="current"><a href="http://www.dynamicdrive.com/style/" title="CSS Library"><span>CSS Codes</span></a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="Help Forums"><span>Forums</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Webmaster Tools"><span>Tools</span></a></li>
<li><a href="http://www.javascriptkit.com/jsref/" title="JavaScript tutorials and scripts"><span>JavaScript</span></a></li>
</ul>
</div>
<br style="clear: left;" />

<p class="iepara">Paragraph that follows...</p>

Code Info

Rate this code:

Date Posted: 04/21/2007

Revision History: Jan 5th, 09"- Removed need for IE7 spacing hack.

Usage Terms: Click here