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

I love your new look and .css is scrumptious... bravo and thanks.

Posted by Matt Pekjon on 05/11, 02:34 PM

Nice and concise! Thanks for the clean and simple content, I am working a project now that uses tabs and this provides a quick solution.

Posted by Bruce Chapman on 05/11, 07:16 PM

this is fab! kudos to dynamicdrive for the wonderful script!

Posted by zalina on 05/13, 02:34 AM

I'm a n00b to CSS, but this is really simple, it makes my site look so much more professional

Posted by Chris on 05/13, 04:36 PM

the images dont work with me...i put the .css file and the .htm file and the .gif files in one map and it still doesn't work:S
plz help

Posted by rogier on 05/16, 10:36 AM

How I can center the menu?

Posted by Damu on 05/17, 03:36 PM

Rogier, check that the images are placed inside the "media" sub folder within your directory, or change the paths to the images inside the CSS from "media/tab.gif" to the correct path.

Damu, that's the problem with the sliding doors technique, which uses floats- there's no real easy way to center the menu tabs.

Posted by ddadmin on 05/17, 04:33 PM

I don't know why but even the button on your page flickers with my browser...
When i download all locally and use in my local web server it's a little better but still flickers. Can it be my explorer that's the problem ?

Posted by Sig on 05/19, 02:03 AM

Very neat and tidy and also great to use for single buttons but would be better if it had a bottom image.

Thanks again Dynamic Drive

Posted by Callum Haywood on 05/27, 08:00 AM

I am just becoming familiar with CSS - programming is not new to me

#slidetabsmenu a span {
please clarify this notation - does it refer to: slidetabsmenu a & slidetabsmenu span definitions to the Style?? thanks

trying to implement this type of menu on my site so any help appreciated..
BTW this menu is very clean -n- sharp

Posted by Jean - Admin ECC on 06/05, 06:52 AM

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

Commenting is not available in this weblog entry.