关闭顶部展开顶部

DIVCSS菜单:纵向CSS菜单实例之橙色记忆_DIV+CSS实例

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

  我们在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>

  XHTML代码没啥好说的了。我们说说CSS代码:

示例代码 [www.mb5u.com]
* {
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;
}

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

  设置列表项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实例/更新时间:2007-05-27
相关DIV+CSS实例
闂備焦鐪归崺鍕垂闁秵鍋ら柡鍥舵緛缂嶆牠鏌涢埄鍐姇闁抽攱甯楅妵鍕即濡も偓娴滄儳顪冮妶蹇曠Ф闁瑰嚖鎷�
婵犵數鍋涢顓熸叏椤撱垹纾婚柟鐐灱濡插牓鏌¢崒婵囩《濠⒀勭⊕娣囧﹪鎳犻澶嗗亾濠靛鐓熼柕蹇婃櫅閻忔煡鏌熼崙銈嗗
婵犵數濮烽。浠嬪焵椤掆偓閸熷潡鍩€椤掑嫷妫戠紒杈╁仜椤撳吋寰勭€n亝顓鹃柣搴f嚀鐎氼厽绔熼崱娆愬床濞戞柧绶氶弻锝夊閳轰胶浼堥梺鐟板殩閹凤拷
婵犵數濮烽。浠嬪焵椤掆偓閸熷潡鍩€椤掑嫷妫戠紒杈╁仜椤撳吋寰勬繝鍕靛悑闂備浇顕栭崹搴ㄥ礋椤撗勑氶梻浣筋嚙闁帮絽岣胯铻炴繛鎴欏灪閸嬪鏌ㄩ悤鍌涘
闂傚倷鑳舵灙缂佺粯鍔欓獮濠冩償閵娿儳鍔﹀銈嗗笒閸婂摜鏁崼鏇炵閻庢稒岣块惌鎺斺偓瑙勬礃缁诲牓寮幘缁樻櫢闁跨噦鎷�
闂傚倷鑳舵灙缂佺粯鍔欓獮濠冩償閵娿儳鍔﹀銈嗗坊閸嬫捇鏌涘顒夊剳缂侇喖锕弫鍌炲礈瑜忛悡鎾绘煟鎼搭垳宀涢柡鍛箞閹苯鈻庨幋鐘碉紳婵炴挻鑹鹃敃銉р偓姘炬嫹
闂傚倷娴囬妴鈧柛瀣尰閵囧嫰寮介妸褉妲堥梺浼欏瘜閸o綁寮诲☉妯锋斀闁归偊浜為懗铏圭磽娴i潧濡芥俊鐐舵椤曪綁濡搁埡濠冩櫖濠电偛妫欓崹鐢电箔閿熺姵鈷戦柛婵嗗閳ь剙顭烽獮濠囧箻閼告娼熼梺璺ㄥ櫐閹凤拷
闂傚倷绀侀幖顐﹀疮閻楀牊鍙忓瀣捣缁€濠傤熆閼搁潧濮堥柣鎿勭秮閹娼幏宀婂妳濠电偛鐪伴崐鏇㈡箒闂佹寧绻傚Λ娆戠矆閳ь剟姊洪崨濞氭垿鎮ч悩鑼殾闁规壆澧楅弲鎼佹煥閻曞倹瀚�
濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙淇婇姘倯閻庢氨绮妵鍕箻鐎靛摜鐣洪柣搴㈢啲閹凤拷
婵犵數濮烽。浠嬪焵椤掆偓閸熷潡鍩€椤掑嫷妫戠紒杈╁仜椤撳ジ宕堕妸銉紩婵$偑鍊栭幐鑽ゆ崲閸愵亖鍋撳铏彧濞e洤锕、娑樜旈埀顒佹櫠閸欏绡€妞ゎ偒鍠楃€氾拷
濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙鎱ㄥ璇蹭壕閻庤娲﹂崜鐔笺€佸▎鎾崇闁绘挸绨堕崑鎾绘偨閸涘﹦鍘搁梺鍓插亝缁诲嫬鐡┑鐘愁問閸n垶骞忛敓锟�
濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙鎱ㄥ璇蹭壕闂佸搫鑻幊姗€宕洪埀顒併亜閹哄棗浜鹃梺瀹狀嚙闁帮綁鐛幋锕€绠涢梻鍫熺⊕椤斿棝姊绘担鍛婃儓閻庢碍鎮傞獮蹇涙晸閿燂拷
濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙鎱ㄥ璇蹭壕閻庤娲╃紞渚€鐛€n亖鏀介柛顐亗缁憋拷
婵犵數濮烽。浠嬪焵椤掆偓閸熷潡鍩€椤掑嫷妫戠紒杈╁仜椤撳吋寰勬繝鍕幀闂備胶鎳撻悺銊ф崲閸曨垼鏁傞悗娑櫭肩换鍡樸亜閺嶎煈娈斿褍寮剁换婵嬶綖椤旇棄顏�
闂備浇顕ф鎼佸储濠婂牆绀堟繝闈涱儐閸嬪鏌熼幆鐗堫棄闁活厽顨呴埞鎴︽偐閹绘帗娈梺濂告涧缂嶅﹪寮婚妶澶嬪殟闁靛鍎遍~宥夋⒑缂佹ḿ澹勭紓宥勭閻e嘲鈻庨幘瀛樻闂佽法鍣﹂幏锟�
UB闂傚倷绀佸﹢杈╁垝椤栫偛绀夋俊銈呮噽瀹撲線鏌涢妷銏℃珕閻庢碍宀搁幃妤€鈽夊▍铏灴閿濈偤鏁撻敓锟�
闂傚倷娴囨竟鍫熴仈缁嬫娼栧┑鐘崇閻掗箖鎮楅悽鐢点€婇柛瀣崌閻涱噣宕归鍙ョ棯婵犵數濮崑鎾绘煥閻曞倹瀚�
闂備浇顕ф鍝ョ不瀹ュ鍨傞柛婵嗗閼板潡鏌涢姀銏犳
闂傚倷绀侀幉鈥愁潖缂佹ɑ鍙忓瀣捣缁€濠傤熆鐠鸿櫣鐏遍柛妤佺缁绘盯宕卞Δ鈧銏ゆ煕閻愬樊妲圭紒缁樼〒缁辨瑩鎮╅崫鍕腐闂備胶枪妤犲繘骞忛敓锟�
缂傚倸鍊搁崐鐑芥倿閿曞倹鍋¢柨鏇炲€搁崹鍌涚節婵犲倸顏い鈺呮敱閵囧嫰骞掑鍥舵М缂備焦褰冨﹢閬嶅焵椤掑倸浠柛濠冪箘缁辨挸顫濇0婵囨櫓闂佽法鍣﹂幏锟�
©2017 www.mb5u.com濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙鎱ㄥ璇蹭壕閻庢鍣崳锝夊箖閳哄懎绠甸柟鐑樻尭閻︼拷
闂傚倷娴囬妴鈧柛瀣崌閺岀喖顢涘⿰鍐炬毉濡炪們鍎婚幏锟�&闂傚倷绀侀幉锛勬暜閹烘嚦娑㈠籍閸噥妫呴梺璺ㄥ櫐閹凤拷