CSS实现的左侧垂直导航（简洁）

江山如画 • 2018年9月22日上午8:19 • 网页特效 • 阅读 5554

CSS实现的左侧垂直导航（简洁），站长们可以方便的更改样式。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS实现的左侧垂直导航（简洁）|www.125jz.com</title> <style type="text/css"> /**清理边距**/ body,hr,p,dl,dt,dd,ul,ol,li{ margin:0px; padding:0px; } /**默认字体**/ body{ font:12px/1.5 宋体,arial,sans-serif; } ul,ol,li { list-style:none; } a { text-decoration:none; } /**重置**/ .invisible { visibility:hidden; } .noBg { background:none !important; } .clear { display:block; height:0; overflow:hidden; clear:both; } .clearfix:after { content:'\20'; display:block; height:0; clear:both; } .clearfix { *zoom:1; } /**页面样式**/ .hidden { display:none; } .wmenu dt ,.wmenu dt a,.wmenu dd a:hover ,a.currcent {background:url(../images/w_base_z.png) no-repeat;} .wmenu {height:500px;width:190px; border:1px solid #d1d1d1; background:#f3f3f3;} .wmenu dl{border-bottom:1px solid #d1d1d1; } .wmenu dt {height:41px;line-height:41px;border-bottom:1px solid #d1d1d1; text-align:left; background-position:153px -56px;} .wmenu dt a{display:block; padding-left:48px; font-size:16px; color:#444343;} .wmenu dt.user a{ background-position:18px -22px;} .wmenu dt.edit a{ background-position:18px 12px;} .icotop { border:none !important; background-position:153px -90px !important;} .wmenu dd {line-height:37px;} .wmenu dd a{display:block;padding-left:50px; font-size:14px; color:#362c30;} .wmenu dd a:hover ,a.currcent{display:block;padding-left:50px; color:#fff !important;background-repeat:repeat-x;background-position:left bottom;} </style> </head> <body> <div class="wmenu"> <dl> <dt ><a href="#">网页制作教程</a></dt> <dd><a href="#">网页布局</a></dd> <dd><a href="#">网站规划</a></dd> <dd><a href="#">DIV+CSS</a></dd> </dl> <dl> <dt class="edit"><a href="#">网站建设</a></dt> <dd><a href="#">免费域名</a></dd> <dd><a href="http://www.125jz.com/resources/freespace">免费空间</a></dd> </dl> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script></script> <script type="text/javascript"> $('.wmenu dl dt').click(function(){ $(this).toggleClass('icotop'); $(this).siblings('dd').toggleClass('hidden'); }); </script> </body> </html>

Tips:You can change the code before run.

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2663.html