Dynamic Drive CSS Library- Sliding Doors Tabs Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

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 (40)

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

Not working in Safari, but works in every other browser. Not sure what the problem is, but Safari is just showing it as a list. :(

Posted by Ryan on 04/06, 02:17 PM

thank you so much for the great effort you are making to help web creators in there designing.This is Aziz-light from Morocco.

Posted by aber on 05/03, 12:15 PM

Hello.. how do I make the buttons taller? They seem to be shorter on my site than even on this page..

Otherwise.. great menu.. I hope someone can help me out.

Posted by Peter on 06/20, 05:48 PM

if i use the id=current, it works when i load the page but if i select another tab(the content is all on the same page) how do i get the new tab to stay highlighted.. thank you in adavance.

Posted by torrey card on 09/23, 01:28 PM

can anyone tell me how to change the font size in the tabs? thanks. Jose

Posted by jose on 10/17, 01:15 PM

Hey, thanks for the menu! Nice work.

Posted by Chase Martin on 11/28, 09:53 AM

Very nice! I am combining this with dMenu for a drop-down nav-system and it works beautifully.

Posted by Al on 04/15, 10:07 AM

None

Posted by Arif Baig on 05/06, 10:28 PM

i want to download this page so please help me further.

Posted by Arif Baig on 05/06, 10:30 PM

Hey great code. So far only tested in Safari & FF in OS X with perfect results.

To clean the code up further, I removed the containing div and added the id to the ul so:

<ul id="slidetabsmenu">

Also, to animate the menu, I redrew the images so that the rollover part of the image (the lower half of the image) was a couple of pixels lower than it was originally. Then by varying the padding on the links, I got the links to drop a couple of pixels too.

Here is links CSS I used. Notice that the padding value goes from 6px 14px 3px 5px to 8px 14px 1px 5px. As long as overall padding height doesn't change there will be no shifting of the content that sits below it.

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

#slidetabsmenu a:hover span { color: #FFFFFF; padding:8px 14px 1px 5px; }

Posted by Si on 05/18, 06:07 AM

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