Dynamic Drive CSS Library- CSS Thick Tabs

CSS Library: Horizontal CSS Menus: Here

CSS Thick Tabs

These CSS menu tabs come with thick top/bottom padding to achieve that attractive cushioned look. Setup is very easy- each menu link simply carries a gradient background image that is changed to a darker version of the original when the mouse rolls over each menu item.

Demo:

The two images used (resized horizontally):

Dimensions- 50px by 59px

The CSS:

<style type="text/css">

#thicktabs{
margin: 0;
padding: 0;
float: left;
font: bold 13px Tahoma;
}

#thicktabs li{
display: inline;
}

#thicktabs li a{
float: left;
color: black;
padding: 8px 11px; /*padding of tabs*/
text-decoration: none;
background: transparent url(media/pinkbg.gif) top right no-repeat;
border-top: 1px solid #d3bdbe; /*top border style*/
border-bottom: 3px solid #ffa1a3; /*thick bottom border below tabs*/
}

#thicktabs li a#leftmostitem{ /*Extra CSS for left most menu item*/
border-left: 1px solid #d3bdbe; /*left border style*/
}

#thicktabs li a#rightmostitem{ /*Extra CSS for right most menu item*/
border-right: 1px solid #d3bdbe; /*right border style*/
background-position: top left; /*Position background image to the left instead of default right, to hide indented underline for this link*/
}

#thicktabs li a:visited{
color: black;
}

#thicktabs li a:hover{
color: black;
background-image: url(media/pinkbgover.gif); /*background image swap on hover*/
}

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

<ul id="thicktabs">
<li><a id="leftmostitem" href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
<br style="clear: left" />
<p class="iepara">Paragraph that follows...</p>

Code Info

Rate this code:

Date Posted: 11/12/2006

Revision History: None

Usage Terms: Click here

Your Comments (60)

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 6 pages < 1 2 3 4 > Last »

Or an even similar piece of CSS code outlined above:

#tab{
margin: 0 auto;
}

Posted by Matt Oakes on 12/01, 06:52 PM

This menus is nice. But its not working in the opera 7.5 version. The menus display verically. So Please try to solve the problem in cross browsers. So its greatful for us.

Posted by Ganesh Kumar on 12/02, 02:10 AM

cool script... used it for one of my company's conferences... http://www.asmiweb.com/sixsigma check it out (in IE... FF not so much, ha =P).

Posted by epictum on 12/05, 05:26 PM

Where is the the pink bars?! Mine doesn't show!

Posted by YumiYuki on 12/09, 01:52 PM

Why dont you use the built in ie css fade for IE users to avoid using images?

Posted by Will on 12/13, 09:05 AM

If you want to do imageless in IE not sure about other browsers replace the image background reference in your css to this...
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=Gainsboro,endColorStr=white);

Posted by Will on 12/13, 09:35 AM

how would i get the bottom border to span across all the way and not just be under the buttons?

Posted by Meez on 12/23, 07:15 AM

mmmm nvm answered my own question



#nav{

width:770px;

margin: 0;

padding: 0;

float: left;

font: bold 12px Trebuchet MS;

border-bottom: 3px solid white;

}

Posted by Meez on 12/23, 07:17 AM

cool menu but how do you make it multi-leveled

Posted by Joe on 12/23, 11:05 AM

This is really nifty. Thanks for the great example!

Posted by Arun on 12/23, 11:21 AM

Comment Pages 2 of 6 pages < 1 2 3 4 > Last »