Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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 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.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.