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

wow that's cool. nice and crisp. Really easy to implement.............
Posted by david calvert on 06/02, 07:54 AM
so does anyone know how to center these.. nice crisp code btw..
Posted by Mev on 09/26, 09:44 AM
I have multiple tabs and 2 of them have more than one line of text. THis is good until the other tabs with one line of text is not centered. How can ensure that one line of text is vertically centered with the double lines
Posted by joseph on 01/16, 10:08 AM
Wonderful write up - I have been struggling with sliding door buttons all night, and this walk thru made everything come together. Thank you!
Posted by JEN on 03/19, 10:04 PM
Killer little script, super easy to integrate and good use of CSS based styling. I used an External CSS file to even keep down the size. Really nice work, would love to see a matching horizontal menu to use as well.

Thanks,

AZESites.com
Posted by Darren on 04/08, 11:22 AM
Need it desperately.
Posted by Sophie on 04/21, 05:42 AM
Nice and concise! Thanks for the clean and simple content.
Posted by Think Flick on 06/02, 11:13 PM

Comment Pages 5 of 5 pages « First  <  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.