Glowing Tabs Menu--tutorial.jcwcn.com

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:

Home
CSS Codes
Forums
Tools
JavaScript

The two image used:

Dimensions- 300px by 163px

The CSS:

Select Code Expand

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
    
#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:

Select Code Expand

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

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Glowing Tabs Menu

relation tutorial

Category

New

Hot