Dynamic Drive CSS Library- Sliding Doors Vertical Menu

CSS Library

CSS Layouts

Web Graphics

Free 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:

<style type="text/css">

.slidedoormenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* width of menu (don't forget to add border with below!) */
border-left: 8px solid #ffa1a3; /* thick left border of menu */

}

.slidedoormenu li{
border-bottom: 1px solid #885b5c; /* Gray border beneath each menu item */
}

.slidedoormenu li a{
background: white url(media/vstrip.gif) repeat-y left top; /* Background image positioned to the left(v) top(h) corner initially */
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: black;
width: auto;
border-bottom: 1px solid white; /* White border beneath each menu item link, to add depth */
padding: 7px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
}

.slidedoormenu li a:visited, .slidedoormenu li a:active{
color: black;
}

.slidedoormenu li a:hover{
background-position: -387px 0; /* Shift background image horizontally 387px, or the start of the 2nd background image */
color: black;
}

.slidedoormenu li.lastitem, .slidedoormenu li.lastitem a{
border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
}

.slidedoormenu li.lastitem a{
padding: 8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
}

</style>

<!--[if IE]>
<style type="text/css">
.slidedoormenu li a{ /* Menu link width value for IE */
width: 100%;
}
</style>
<![endif]-->

The HTML:

<ul class="slidedoormenu">
<li><a href="http://www.dynamicdrive.com/">»  Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >»  CSS Examples</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">»  JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">»  DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">»  CSS Drive</a></li>
<li class="lastitem"><a href="http://www.codingforums.com/">»  Coding Forums</a></li>		
</ul>

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.