Dynamic Drive CSS Library- Glowing Tabs Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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 1 of 5 pages 1 2 3 > Last »

Wow, these are cool! Love the mouseover effects, thanks again DD!

Posted by Callum Haywood on 04/21, 04:06 AM

Isn't this just the sliding doors effect published over at ALA ages ago with another hover effect?

Posted by Fredrik Wärnsberg on 04/22, 05:59 PM

Hi Fredrik:
Well yes it is, as it says in the description. :)

Posted by ddadmin on 04/22, 11:51 PM

this is very good css.

Posted by eyeglasses on 04/24, 07:59 AM

I'm confused, why is using sliding doors to move the image better than just doing a simple image swap on hover?

Posted by Paul on 04/29, 07:56 AM

@ Paul

it is better, because there isn't a delay on the mouseover as the reader hovers over the link, and the browser has to load a second image, the bg image is already loaded completely, therefore making for smooth transitions across all connection speeds and browsers. Without the need for a js image preload.

Posted by Quentin on 04/30, 10:31 PM

Must say, thank you.
I was using a preload image script. This removed that anoying script and 2 files for every tab.

Cheers.

Posted by Pen on 05/03, 10:04 AM

I really like that one. I appreciate your work!

Posted by Tyrone on 05/09, 07:26 AM

I'm doing a webpage and need a mouse over for a
different effect. This looks like something I'm
looking me.
Regards
Dennis

Posted by Dennis Peake on 05/09, 04:54 PM

How do you centre this menu bar? What code do you use for an external style sheet?

Posted by Cate on 05/24, 12:01 AM

Comment Pages 1 of 5 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.