DIVCSS菜单:纵向CSS菜单实例之橙色记忆_DIV+CSS实例
教程Tag:暂无Tag,欢迎添加,赚取U币!
缂傚倸鍊搁崐椋庣矆娴h娲晝閸屾氨鍔电紓浣插亾闁硅京顒CMS闂備浇宕甸崰鎰版偡閵夈儙娑樷攽鐎c劉鍋撻崒鐐查唶闁哄洨鍋為悗顒€鈹戦悙鍙夘棡闁搞劎鍠栧濠氭晸閿燂拷婵犵數鍋為崹璺侯潖鐟欏嫮鐝堕柛鈩冪☉閻撴﹢鏌″搴″箺闁抽攱甯¢弻銊╂偆閸屾稑顏� 缂傚倸鍊风粈渚€藝闁秴绐楅柟閭﹀墾閼板潡鏌涢妷顔煎缂佲偓婢舵劖鐓冮柕澶堝妽閻濐亪鏌e┑鎾村 闂傚倸鍊风欢锟犲磻閸曨垁鍥ㄦ綇閳哄啰顦繝銏f硾閺堫剟宕楀⿰鍫熺厸闁搞儯鍔嶉惃鎴︽⒒婢跺﹦效闁哄被鍊栧ḿ蹇涘Ω閿旂粯顥涚紓鍌欑劍閸炲骞忛敓锟� 闂傚倷绀侀幖顐﹀疮閻楀牊鍙忛柟缁㈠枛濡炰粙鏌″搴′簽闁告纰嶇换娑㈠幢濡闉嶅┑顕嗙稻閸旀鍩€椤掑喚娼愰柟顔肩埣瀹曟洟鏌嗗鍛厬闂佽法鍣﹂幏锟�,闂傚倷娴囬惃顐﹀礋椤愩垹袘闂佽姘﹂~澶嬬箾婵犲偆鍤曢柛顐f礀缁€鍐┿亜閺傚灝鎮戞い蹇曞枑缁绘盯骞嬮悙鏉戠殤闂佺ǹ顑嗛幑鍥ь潖閸濆嫧鏋庨柟顖嗗嫮浜梻浣告啞閻熴儳鎹㈠Ο渚殨濠电姵纰嶉弲鎼佹煥閻曞倹瀚�!
我们在MB5U.com的文章中,介绍了不少CSS横向菜单的制作方法与思路。今天我们说说竖向菜单的制作。横向菜单主要是通过浮动,让本来按列显示的元素变成一行显示,而竖向菜单的制作就相对简单了很多,最主要的还是在于视觉效果。我们看今天制作的CSS竖向菜单的最终效果,如下图:

我们定义一个UL无序列表作为菜单的容器,设置其左边框及背景图片。让菜单项自行从上而下的排列,定义链接鼠标悬停时的背景与UL的背景有所区别。这款菜单就这样简单的搞定了。我们看下面的XHTML代码:
示例代码 [www.mb5u.com]
<ul id="menu">
<li><a href="http://www.mb5u.com/" title="">MB5U.com首页</a></li>
<li><a href="http://www.mb5u.com/" title="">Div CSS教程</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS布局实例</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS2.0教程</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS酷站欣赏</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS模板下载</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS在线手册</a></li>
<li><a href="http://www.mb5u.com/" title="">XHTML教程</a></li>
</ul>
<li><a href="http://www.mb5u.com/" title="">MB5U.com首页</a></li>
<li><a href="http://www.mb5u.com/" title="">Div CSS教程</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS布局实例</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS2.0教程</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS酷站欣赏</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS模板下载</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS在线手册</a></li>
<li><a href="http://www.mb5u.com/" title="">XHTML教程</a></li>
</ul>
XHTML代码没啥好说的了。我们说说CSS代码:
示例代码 [www.mb5u.com]
* {
font-size:13px;
font-weight:800;
text-decoration:none;
margin:0;
padding:0;
}
body {
background:#fff;
}
font-size:13px;
font-weight:800;
text-decoration:none;
margin:0;
padding:0;
}
body {
background:#fff;
}
整体布局声明,文字大小及加粗,去除文字装饰线。边距与填充均为零。设置body的背景色为白色#fff,我们经常忽略body背景色的设置,总是认为浏览器默认的网页背景色就是白色的,其实不然,有些时候并非都是白色,为了更加严谨,我们还是声明body的背景色为白色。
示例代码 [www.mb5u.com]
#menu {
list-style-type: none;
border-left:10px solid #f60;
margin:50px auto;
width:160px;
height:247px;
overflow:hidden;
background:#fff url(bga_mb5u.com.jpg) 1px 0 repeat-y;
}
list-style-type: none;
border-left:10px solid #f60;
margin:50px auto;
width:160px;
height:247px;
overflow:hidden;
background:#fff url(bga_mb5u.com.jpg) 1px 0 repeat-y;
}
UL无序列表menu,去除列表项预设标签,设置左边框为10px的橙色实线。边距设置为上下50px,左右为自动,实现了UL的水平居中对齐于浏览器窗口。设置宽度与高度分别是160px、247px(为什么设置这样的高度看下面的说明),溢出设置为隐藏,背景为白色,图片距离左侧1px,垂直方向重复。
示例代码 [www.mb5u.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_mb5u.com.jpg) 1px 0 repeat-y;
}
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_mb5u.com.jpg) 1px 0 repeat-y;
}
设置列表项li的下边框为1px的白色#fff实线。设置链接a为块元素,文字颜色为淡黄色#fffeee,文字缩进26px,行高为30px。鼠标悬停时链接产生背景(颜色及图片),颜色为白色#fff,背景图片产生了变化,在UL中背景图片是:bga_mb5u.com.jpg。在链接悬停状态中背景图片是:bgb_mb5u.com.jpg。
关于UL高度设置为247px的说明:
通过上面的设置我们注重到,列表项的下边框有一个1px的白色实线。假如我们去掉UL的高度设置将会看到如下效果:

在红色圆圈内箭头所指的部分,UL的左边框10px的实线凸出了一点点。这就是因为列表项的下边框有一个1px的白色实线。让整个菜单看起来不是那么完美了。
我们发现共用八个菜单,每个菜单的高度是30px(行高) 1px(li的下边框线)=31px。通过这些我们可以计算出UL的合理高度应该是:31px*8-1px=247px。这就是我们设置UL的高度为247px的原因,当然,为了正常显示我们设置溢出为隐藏。这样就达到了最终的较完美效果。
相关DIV+CSS实例:
- 相关链接:
- 教程说明:
DIV+CSS实例-DIVCSS菜单:纵向CSS菜单实例之橙色记忆
。