Dynamic Drive CSS Library- Overlapping horizontal tabs

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

CSS Library: Horizontal CSS Menus: Here

Overlapping horizontal tabs

Author: Dynamic Drive

Using relative positioning and negative margins, this CSS code creates "overlapping" horizontal tabs that each snug up and slightly overlaps the tab to the left of it. There is no mistaking the "selected" tab, with its raised look. Uses two tab images in total to create the entire interface.

Demo:

The two images used:

True dimensions- 492px by 63px

The CSS:

<style type="text/css">

.ddoverlap{
border-bottom: 1px solid #bbb8a9;
}

.ddoverlap ul{
padding: 0;
margin: 0;
font: bold 90% default;
list-style-type: none;
}

.ddoverlap li{
display: inline;
margin: 0;
}

.ddoverlap li a{
padding: 3px 7px;
text-decoration: none;
padding-right: 32px; /*extra right padding to account for curved right edge of tab image*/
color: blue;
background: transparent url(media/righttabdefault.gif) 100% 1px no-repeat; /*give illusion of shifting 1px down vertically*/
border-left: 1px solid #dbdbd5;
position: relative;
display: block;
float: left;
margin-left: -20px; /*shift tabs 20px to the left so they overlap*/
left: 20px;
}

.ddoverlap li a:visited{
color: blue;
}

.ddoverlap li a:hover{
text-decoration: underline;
}

.ddoverlap li.selected a{ /*selected tab style*/
color: black;
z-index: 100; /*higher z-index so selected tab is topmost*/
top: 1px; /*Shift tab 1px down so the border beneath it is covered*/
background: transparent url(media/righttabselected.gif) 100% 0 no-repeat;
}

.ddoverlap li.selected a:hover{
text-decoration: none;
}

</style>

<!--[if IE]>
<style type="text/css">
.ddoverlap{
height: 1%;  /*Apply Holly 3px jog hack to get IE to position bottom border correctly beneath the menu*/
}
</style>
<![endif]-->

The HTML:

<div class="ddoverlap">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript</a></li>
<li><a href="http://www.codingforums.com">Forums</a></li>
</ul>
<br style="clear: left" />
</div>

Code Info

Rate this code:

Date Posted: 10/04/2006

Revision History: None

Usage Terms: Click here

Your Comments (51)

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 >

This is great Trick and i like it so much.i would love to use it.and for sure will give you credit.
wish you all the best.

Posted by page rank Advisor on 02/26, 07:56 AM

I hoope to use this script oneday in the future as well as write the script

Posted by Nicole on 02/28, 08:16 AM

nice but wants some more changes so they appear in good look.

Posted by saurabh trivedi on 03/17, 02:23 AM

Nice CSS trick!

Would like to ask if you have some style that could do overlapping of image tabs? Yes, exactly look like this one but instead of text nav, I would like to have images. I found one at http://www.shapeshed.com/journal/overlapping_tabbed_navigation_in_css/ but I think it's not a nice idea if let's say I have 10 tabs.

Posted by CMSTheme on 03/29, 12:33 PM

Nice, I like it for my new photoalbums-upload..
But it sucks if you use it not for foldering of files on your sites, than for links.

Posted by MyGuitars on 03/30, 10:26 AM

I really like it, except for the underline - red hover part. With a few minor changes, I think it could be a great tab menu. Great job.

Posted by Özel Ders Kurs on 04/17, 01:42 PM

when i use this on my page.. in the internet explorer when the user scrolls down the menu becomes out of site is there anyway we freeze it on the top?? I ve tried to use it in frames but it doesnt work.. can any one help?

Posted by Jish on 04/26, 04:50 AM

Nice! I think I'll use this one.

Posted by Tyrone on 05/09, 08:27 AM

how to add this code into my site

Posted by Abd on 05/20, 01:01 AM

Well explained. Thanks.

Posted by Yeah on 06/11, 04:58 PM

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

Commenting is not available in this weblog entry.