Dynamic Drive CSS Library- Sliding Doors Tabs Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Sliding Doors Tabs Menu

Author: Dynamic Drive

This is a two state rollover tabs menu based on the popular sliding doors technique. It uses two images only, a right and left tab, with each image shifting up and down as the mouse moves over a tab. This ensures a flicker free experience in IE, though it also means the tab images themselves require a little more labor to create.

The "CSS" tab is highlighted, by giving its <li> container an ID of "current."

Demo:

The two images:

True dimensions- 370px by 249px

The CSS:

<style type="text/css">
    
#slidetabsmenu {
float:left;
width:100%;
font-size:90%;
line-height:normal;
border-bottom: 1px solid gray;
}

* html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

#slidetabsmenu ul{
list-style-type: none;
margin:0;
margin-left: 10px;
padding:0;
}

#slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}

#slidetabsmenu a {
float:left;
background:url(media/tab-left.gif) no-repeat left top;
margin:0;
padding:0 0 0 9px;
text-decoration:none;
}

#slidetabsmenu a span {
float:left;
display:block;
background:url(media/tab-right.gif) no-repeat right top;
padding:3px 14px 3px 5px;
font-weight:bold;
color:#3B3B3B;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */

#slidetabsmenu a:hover span {
color: black;
}

#slidetabsmenu #current a {
background-position:0 -125px;
}

#slidetabsmenu #current a span {
background-position:100% -125px;
color: black;
}

#slidetabsmenu a:hover {
background-position:0% -125px;
}

#slidetabsmenu a:hover span {
background-position:100% -125px;
}

</style>

The HTML:

<div id="slidetabsmenu">
  <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</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Tools</span></a></li>	
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Forums</span></a></li>
  </ul>
</div>

<br style="clear: left;" />

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (47)

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

I believe #slidetabsmenu a span { addresses slidetabsmenu, all links, and all spans. OR it addresses links and spans inside of slidetabsmenu.

I don't recommend this script as there are two large images which may cause slow loading for poorer internet connections.

Posted by Nathan on 06/16, 05:13 PM

hi, nice scrípt, but....i cant work with png images :'(, I make a new tab-right, but the size in gif is 6kb, but in png it's 2.1 kb, help me plis, if i change the extension, the scrípt dont work, thanks.

Posted by santiag0 on 06/19, 12:10 AM

with fire fox 1.5.0.4

the images don't move like it say's it dose

Posted by james on 06/19, 01:24 PM

~Altogether a great menu...I use it on my website. Would it be possible to do some rollover message effects under the menu?

Posted by InsideLine on 06/27, 10:13 AM

The images don't work with me either. I first had them in my images folder, then I made a media folder and put them in there, I even put in the same folder with the source code, each time I changed the path, but nothing. I use an external style sheet, and the link to it is correct. I would really like to use these tabs on my site ... HELP!!! :-)

Posted by Andrea on 08/02, 09:38 PM

Very nice contribution. Neat and clean. Thanks very much.

Posted by Joseph Cook on 08/15, 12:59 AM

Looks great, but incomplete in that there's nothing to indicate the currently selected tab. Isn't that the whole point of tabs? If I can't tell which one was selected last, how is this different than just a row of links?

Posted by scott on 09/13, 12:38 PM

I was trying to use this menu, but with a different front and I can't seem to figure out how to change it. I am new to CSS. Tryed a few things but it didn't work. Any advise would be great. =)

Posted by Derek on 09/30, 10:24 PM

I am having a problem where I want the tabs to be fill an exact space, for example, 2 tabs filling 450px so that it matches with the content box below. Any suggestions? The tabs do work great though, very easy to use otherwise!

Posted by Jason on 10/31, 09:28 AM

A real time saver, thanks Dynamic Drive!

Posted by Ron Jones on 10/31, 12:05 PM

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

Commenting is not available in this weblog entry.