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: Vertical CSS Menus: Here

Sliding Doors Vertical Menu

Author: Dynamic Drive

This nicely padded vertical menu swaps between two background images depending on whether the mouse is over or out of a menu item. To ensure a perfectly smooth transition between image change (especially in IE), it uses the Sliding Doors technique and a single background image that merges the two backgrounds into it.

Demo:

The single image used (resized horizontally):

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 03/30/2007

Revision History: None

Usage Terms: Click here

Your Comments (31)

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 4 pages  1 2 3 >  Last »

I tried this and it seems to be working fine. Great work! Artem.
Posted by Artem on 04/11, 10:47 AM
Looks and performs great. Is it just me or is DD giving in to the pink revolution? I've seen more pink images than ever in the CSS gallery.
Posted by Ron on 04/16, 08:50 AM
Hey!! great!!! it works perfect for me, thanks
Posted by abadon on 04/27, 10:02 PM
Dear Dynamic Drive,
nice technique.

I had problems when i entered the CSS code into INCLUDE FILE, and trying to use it for multiple pages.
just the first link from the top is working. all other are disable.

Also, is it possible to use a STAY / CURRENT button, as your new script: http://www.dynamicdrive.com/style/csslibrary/item/glowing-tabs-menu/ , ie: <li id="current"> "Sliding Doors" technique.

Thanks for advance

Edi
Posted by Edi Klein on 04/29, 06:45 AM
is just great thanks 4 that
Posted by Liccy on 05/18, 01:04 PM
i seem to be having a problem with the image, if you look at my link, you will see what i mean, help would be appreciated

http://fatpat.integio.co.uk/examples/css1.html
Posted by Fatpat on 05/31, 04:59 AM
Many thanks cooool CSS info and well done to the team of http://www.dynamicdrive.com plz keep it up Thanks
Posted by Jason on 05/31, 03:10 PM
I had always problem - now will be better. Thanks
Posted by Agro on 06/19, 04:15 PM
great job! Where do I got the images use in the code?
Posted by Mose on 06/28, 12:48 PM
thats really great man.. you save me ..thanks
Posted by arama motoru optimizasyonu on 07/24, 07:58 PM

Comment Pages 1 of 4 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.