Dynamic Drive CSS Library- Glowing Tabs Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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

a c t u a l l y great work thanks..

Posted by scarlett on 08/08, 01:01 AM

Can't figure out how to make it work. Do I need to save an image as well as the code?

I'm not so saavy. Thanks in advance.

Posted by Mark on 08/14, 09:57 PM

Hey dude...
Its really Nice Information for me...

Posted by SEO Expert in Delhi on 08/22, 01:09 PM

Thats brilliant, you've gt skills

<a rel="dofollow" href="http://www.newscastlephotoart.com.au" >Photo and Art</a>

Posted by Dean on 08/24, 02:16 AM

The tabs look great viewed with Firefox, but when I use MS IE, some of the links elsewhere on the page actually disappear when I mouse over the tabs. Is there some way to avoid this?

Posted by Dale on 09/07, 01:22 PM

Very nice, just carry on DD

Posted by somel on 09/13, 08:18 AM

look nice - have this on my home site

Posted by projektowanie stron internetowych on 09/26, 12:21 PM

in #glowingtabs{
border-bottom: 1px solid #7e9fff;}
i cant ge the border-bottom for any browser other then that i wlll happy about this horizantal menu.

kindly send suggestion to solve this.

thanks

Posted by krishnan on 10/04, 12:34 AM

I can't use it because my joomla menu doesn't generate <span>.

How can I modify to use it without <span>.

<span>Home</span>

Posted by mikis on 10/30, 07:09 AM

Can this be used for External Pages?

Posted by graphicstoy on 11/15, 05:16 PM

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

Commenting is not available in this weblog entry.