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

dynamicdrive for me is really a big help, i can't build my website without there source..

Posted by lalyn on 07/24, 10:33 PM

thats really great man.. you save me ..

Posted by kale kapi on 07/26, 07:13 PM

Just Thanks!! It's Great

Posted by Steve Dobson on 07/27, 01:57 AM

How could I change the color scheme of this CSS menu? I would like to integrate it into my website!

Posted by Manish Pandey on 08/02, 10:40 PM

How do you make this work on Internet Explorer 6? It works fine on other browsers but in IE6 the menu just disapears, I'm using a fluid design.

Posted by Valentin on 08/12, 06:16 PM

Hi there,

I tried to do this in MS Front Page but all I'm getting is black links with >> in front...

Does this script work in Front Page?

Cheers!

PS. Love your color picker also

Posted by Bruno on 08/26, 05:19 AM

Nice.. Cool.. css... no problem implementing in blog... Tahnk You Dynamic Drive

Posted by Mansur on 12/16, 03:47 AM

No matter what I do...I see bullets...is it me...or you?
Thanks..

Posted by Connie on 12/16, 12:51 PM

Hello
The menu id good, or not expand for click how expand submenu ¿?

Posted by Hoteles en Bariloche on 12/20, 01:39 AM

WoW.. It's really excellent.

Posted by FSF on 01/06, 02:02 AM

Comment Pages 2 of 4 pages < 1 2 3 4 >

Commenting is not available in this weblog entry.