Dynamic Drive CSS Library- Glowing Tabs Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

Advertise Here

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

Your Comments (42)

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

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

i can't get it work in Firefox =[...
please help, thanks

Posted by KeNz on 07/13, 10:24 PM

Wonderful! I just wanna know how to apply it to JSF; I mean, I kinda did it but it is not displaying the entire tab, just the left corner.
I'm doing this:

<div id="glowingtabs">
<h:form>
<ul>
<li><h:commandLink id="whoWhen"
action="#{krpmNavigatorBean.goWhoWhen}">
<span><h:outputText value="#{msg.krpm_title_whoWhen}"></span>
</h:commandLink>
</li>

I know, at least I think, outputTexts render to span... I don't know what's going on. Anyway, little help, please??

Posted by Hernán on 12/16, 12:01 PM

does anybody knows how to add sound to these buttons? help anyone? thanks

Posted by awanbirue on 01/08, 03:24 AM

I always like to read something like this. That is usually a bit hard to find valuable information on the internet. And I found your post using Yahoo and I can say I the time spent was worth reading.

Posted by Reverse Phone Lookup on 05/14, 12:59 AM

I saved both images with the default names into the correct folder, and then copied and pasted the code onto my HTML document and it doesn't work.

Posted by Chad on 05/14, 04:55 AM

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

Commenting is not available in this weblog entry.