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

Hi.

I want to create a small amount of space between the tabs. No more than 5 px so my bacckground will come through slightly. Can't seem to figure it out. Any help is appreciated.

Posted by randy on 03/11, 06:52 PM

it's very nice, I like it :)

Thanks

Posted by Gerald on 03/26, 06:27 PM

this is really great!

Posted by sonia pfeifle on 03/30, 02:16 AM

I like this navigation bar a lot but i am having troubles using the code. Does the code have to be in its own .css file or can it be in the body?

Posted by chris on 03/30, 09:27 PM

I have a site for water filter industry
i want amplement css.
which type of css will ok for my site

Posted by Water Filters on 04/11, 04:53 AM

Hi, Is it Possible to create dropdown menus with this menu. i like the colors and will like to have a drop down menu

Posted by Edwin on 04/11, 09:11 AM

Very nice and light but could be a little less ... pink :)

Posted by wrednysamiec on 04/22, 05:20 AM

its cool but i cant change fonts.

Posted by web tasarımı on 05/03, 06:52 PM

Another great work.
Thank you very much

Posted by Sahibinden on 06/19, 07:11 AM

I am not able to align the tabs to the extreme left of a row, there is a gap & then the tabs start. Can someone please tell me how to remove this gap?

Posted by Deepti on 06/28, 08:17 AM

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