XHTML+CSS常规应用教程——XHTML+CSS导航条(Div+CSS导航条制作教程)

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.

• Dynamic Drive
• CSS Examples
• JavaScript Reference
• DOM Reference
• CSS Drive
• Coding Forums

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]-->

XHTML代码

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