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