Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

The CSS:

The HTML:

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

I took this code and tweaked it so that it was flipped upside down. (So that the tabs pop down from below the line instead of above.) And I have a problem with there being too much space between the top of the tab and the top border. I need them to be flush like on the example shown here. How can I fix this?
Posted by Amber on 11/06, 04:13 PM
I don't really get it...

How can I make the tab to be selected?

I've gone through a dozen of articles about tabs, but nothing works so far. I'm looking for a simple solution: Rounded tabs, which activate when one is clicked... like in Google Adwords CSS design...

In your example, I believe I have to put that navigation into each page every single time and make a new link ative... But what if my navigation is in include file?

I know it's possible to do with javascript, but I'm not good at coding at all.

Is it possible at all to make a CSS rounded tab, that's activated whenever I click on or the other link?

Something similar I've found at:
http://xahlee.org/js/tabs2/a.html

But not sure how to handle images there yet...
Posted by Monty on 11/07, 06:22 AM
Any suggestions as to using this Sliding Doors technique with menu drop-downs? I want to provide some choices under the tabs.

Thanks
Posted by Richard on 12/08, 06:47 PM
Monty,
In order to make the tab selected, you need to write CSS that indicates the 'descendant selector'. You need to include the ID of the tab <li> and then the <body> ID of the page that the tab refers to. So for instance, if you had a <div> named "Nav" that contained your <ul> and <li>'s, and one of the <li>'s was named "t-Monty" that contained an <a href="Montypage.html">Monty<>, and then you had that page (E.g. Montypage.html) with a body tag that had an id of "Monty", you would write the following CSS code.

#nav a:hover, body#Monty #t-Monty a {
color: #333;
padding-bottom: 5px;
border-color: #CCCCCC;
background: #fff ;
}

Whenever a user hovered their mouse over that tab, or clicked on that tab, it would turn the color specified above (white, with text color #333)

Try it out, once you do it once, it will become clear.
Posted by Mark A Holton on 12/14, 04:38 PM
Really cool menu! Easy to install!!!! Thank You!
Posted by Antonio on 12/16, 11:10 AM
This CSS approach runs circles arount what I had tried using JAVA. Finally a good looking menu for my web sites that was easy to implements.
John Gee, Perth, Australia
Posted by John Gee on 12/30, 08:46 AM
Hi,
I love this. But I have a problem.
The tabs show up fine on IE but doesn't seem to work for Firefox 2.0.
Have I done something wrong or is this not compatiblewith FF2.0?
Thanks for your help in advance.
Posted by yoichi on 01/08, 01:33 AM
Hi again,
I don't no exactly why but it worked out with the "Chrome Menu Bar". It must be something to do with my rich template.
Posted by yoichi on 01/08, 04:29 AM
Very neat and Thanks for the clean and simple content, I am working a project now that uses tabs and this provides a quick solution.
Posted by Saleh on 01/16, 01:47 AM
Loaded it down and took it on my page. Nothing works. I think that this is a very bad fake. My Page lists the Menu as a tree and not like here. How would it be to bring instructions about integrating it the right way?
Posted by RayMoe on 03/17, 09:48 AM

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


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.