Dynamic Drive CSS Library- Glowing Tabs Menu

CSS Library: Horizontal CSS Menus: Here

Glowing Tabs Menu

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{
float:left;
width:100%;
font-size:90%;
line-height:normal;
border-bottom: 1px solid #7e9fff; /*Add border strip to bottom of menu*/
}

#glowingtabs ul{
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>

<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->

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: None

Usage Terms: Click here

Your Comments (35)

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 4 of 4 pages « First < 2 3 4

Great !!!
But it doesn't work with Safari .. any solutions ? :O(

Posted by blies on 12/04, 04:05 AM

How do you make it so that when you click a tab it shows the page below instead of launching a new window?

Posted by Somer on 01/08, 11:55 AM

Hi, i really like the glowing tabs, but can anybody help how to change the font?

And is it possible to add maybe a small arrow on top of tab when it's opening a page, so the user would know which page/tab is he/she in?

hope you could help thx a lot

Posted by ratih on 02/27, 07:51 PM

This "Glowing Tabs Menu" breaks in IE, the buttons do not go horizontal on the page, but break and are stacked vertically.

Any suggestions?

Posted by ree on 04/08, 03:10 PM

Hi I put the code but it doesn't work can you help me?

Posted by maria on 05/10, 04:13 PM

Comment Pages 4 of 4 pages « First < 2 3 4