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

Excellent. However, is there a way that I can make it execute some code behind rather than go to a url?

Posted by Mark Korolevich on 05/24, 01:16 PM

I don't like the example color, though love the idea of sliding door which preloads the image cuz i was always gettin complains from users with bad connection. I think this wud solve my problem. Thanks Alot for the Script ... keep up the good work .. Awaiting more...

Posted by Qambar on 05/27, 02:16 PM

These are really nice. Right now I'm fusing them with tabbed content. Nice job! 10/10.

Posted by Max on 05/28, 08:41 PM

Very nice tabs

Posted by Omar Abid on 06/08, 07:56 AM

I entered the HTML and style into dreamweaver (8) and for some reason, the links are showing up, but the images are not. Do I have to save these images to my computer, or is there somthing wrong with he code itself. If anyone knows, please help. I need my site to have this done FAST.

thanks,
Alan Morell

Posted by Alan Morell on 06/21, 10:28 PM

I can't see the image, and the tabs are not glowing at all.

Posted by Yogi on 07/03, 09:32 PM

Not compatible with IE6. Blinks before showing up when mouseover.

Posted by ieWilk on 07/13, 02:08 AM

thanks on the information.....

Posted by mahmod on 08/01, 02:40 AM

even it is not compatible with IE6, it is good.

Posted by scarlett on 08/02, 08:34 AM

Works great for me...thanks!

Posted by Manish Pandey on 08/07, 02:59 PM

Comment Pages 2 of 4 pages < 1 2 3 4 >