DIV CSS菜单：纵向CSS菜单实例之橙色记忆

 

DIV CSS菜单：纵向CSS菜单实例之橙色记忆

2009-11-08 10:19

介绍了不少CSS横向菜单的制作方法与思路。今天我们说说竖向菜单的制作。横向菜单主要是通过浮动，让本来按列显示的元素变成一行显示，而竖向菜单的制作就相对简单了很多，最主要的还是在于视觉效果。我们看今天制作的CSS竖向菜单的最终效果，如下图： 　　我们定义一个UL无序列表作为菜单的容器，设置其左边框及背景图片。让菜单项自行从上而下的排列，定义链接鼠标悬停时的背景与UL的背景有所区别。这款菜单就这样简单的搞定了。我们看下面的XHTML代码： Example Source Code [www.52css.com] <ul id="menu">      <li><a href="http://www.52css.com/" title="">52CSS.com首页</a></li>      <li><a href="http://www.52css.com/" title="">Div+CSS教程</a></li>      <li><a href="http://www.52css.com/" title="">CSS布局实例</a></li>      <li><a href="http://www.52css.com/" title="">CSS2.0教程</a></li>      <li><a href="http://www.52css.com/" title="">CSS酷站欣赏</a></li>      <li><a href="http://www.52css.com/" title="">CSS模板下载</a></li>      <li><a href="http://www.52css.com/" title="">CSS在线手册</a></li>      <li><a href="http://www.52css.com/" title="">XHTML教程</a></li> </ul> 　　XHTML代码没啥好说的了。我们说说CSS代码： Example Source Code [www.52css.com] * {      font-size:13px;      font-weight:800;      text-decoration:none;      margin:0;      padding:0; } body {      background:#fff; } 　　整体布局声明，文字大小及加粗，去除文字装饰线。边距与填充均为零。设置body的背景色为白色#fff，我们常常忽略body背景色的设置，总是认为浏览器默认的网页背景色就是白色的，其实不然，有些时候并非都是白色，为了更加严谨，我们还是声明body的背景色为白色。 Example Source Code [www.52css.com] #menu {      list-style-type: none;      border-left:10px solid #f60;      margin:50px auto;      width:160px;      height:247px;      overflow:hidden;      background:#fff url(bga_52css.com.jpg) 1px 0 repeat-y; } 　　UL无序列表menu，去除列表项预设标签，设置左边框为10px的橙色实线。边距设置为上下50px，左右为自动，实现了UL的水平居中对齐于浏览器窗口。设置宽度与高度分别是160px、247px（为什么设置这样的高度看下面的说明），溢出设置为隐藏，背景为白色，图片距离左侧1px，垂直方向重复。 Example Source Code [www.52css.com] #menu li {      border-bottom:1px solid #fff; } #menu li a {      display:block;      color:#fffeee;      text-indent:26px;      line-height:30px; } #menu li a:hover {      background:#fff url(bgb_52css.com.jpg) 1px 0 repeat-y; } 　　设置列表项li的下边框为1px的白色#fff实线。设置链接a为块元素，文字颜色为淡黄色#fffeee，文字缩进26px，行高为30px。鼠标悬停时链接产生背景（颜色及图片），颜色为白色#fff，背景图片产生了变化，在UL中背景图片是：bga_52css.com.jpg。在链接悬停状态中背景图片是：bgb_52css.com.jpg。 　　点击这里——查看我们共同完成的菜单！ 　　关于UL高度设置为247px的说明： 　　通过上面的设置我们注意到，列表项的下边框有一个1px的白色实线。如果我们去掉UL的高度设置将会看到如下效果： 　　在红色圆圈内箭头所指的部分，UL的左边框10px的实线凸出了一点点。这就是因为列表项的下边框有一个1px的白色实线。让整个菜单看起来不是那么完美了。 　　我们发现共用八个菜单，每个菜单的高度是30px（行高）+1px（li的下边框线）=31px。通过这些我们可以计算出UL的合理高度应该是：31px*8-1px=247px。这就是我们设置UL的高度为247px的原因，当然，为了正常显示我们设置溢出为隐藏。这样就达到了最终的较完美效果。