左边条纹跟随鼠标滑动导航
左边条纹跟随鼠标滑动导航
demo下载地址：http://pan.baidu.com/s/1ntqYXjr
效果如下：
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>左边跟随鼠标滑动导航</title> <meta name="keywords" content="滑动导航" /> <meta name="description" content="左边跟随鼠标滑动导航" /> <style> /*---------重置---------*/ html { font-size: 100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; *overflow:auto; _overflow-x:hidden; } body { margin:0; } p, ul, ol, form, dl, h1, h2, h3, h4, h5, h6 { margin-top:0; margin-bottom:0; } dl, dd { margin-left:0; } ul, ol { padding-left:0; *margin-left:0; list-style-type: none; } ul li { *zoom:1; *vertical-align:bottom; } em, var, cite, i { font-style:normal; } small { font-size:inherit; } s, a { text-decoration:none; } :focus { outline:none; } blockquote, q { quotes:none; margin:0; } table { border-collapse:collapse; border-spacing:0; empty-cells:show;/*table-layout:fixed;*/ } img, iframe { border:none; } img { vertical-align: top; -ms-interpolation-mode: bicubic;/*ie7防止图片缩小失真的*/ } /*---------竖向菜单（非必需）---------*/ .bl-vernav li { border-bottom:1px solid #ddd; margin-bottom:-1px; padding-top:1px; } .bl-vernav a { display:block; height:20px; line-height:20px; padding:10px 16px; } .bl-vernav a:hover { background:#F8F8F8; text-decoration:none; } /*.bl-vernav .cur a{ background:#428BCA; color:#fff;}*/ .bl-vernav-ord { border:1px solid #ddd; } .vernav-level li li { border-left:none; border-right:none; } .vernav-level li li a { padding-left:40px; } .vernav-level .cur .one { background:#F8F8F8; } .vernav-level li .cur a { background:#F8F8F8; } /*diy*/ .bl-vernav-wrap { position:relative; } .bl-vernav-wrap .sideLine { position:absolute; left:-6px; top:0; z-index:1; line-height:0; font-size:0; border-left:#FF5F3E solid 7px; background-color:#F8F8F8; } .bl-vernav { position:relative; z-index:2; } .bl-vernav a:hover { background-color:transparent; } .demobox { width:460px; font-size:14px; color:#333; font-family:'Hiragino Sans GB', 'Microsoft Yahei', "WenQuanYi Micro Hei", SimSun, Tahoma, Arial, Helvetica, STHeiti; } a { color:#333; text-decoration:none; } </style> </head> <body style="padding:50px;"> <div class="demobox"> <h1 class="h3">左边条纹跟随鼠标滑动导航</h1> <br/> <div class="bl-vernav-wrap"> <div class="sideLine"></div> <ul class="bl-vernav vernav-level"> <li><a href="#" class="one">导航菜单</a></li> <li class="cur"> <a href="#" class="one">神探夏洛克</a> <ul> <li><a href="#">海贼王</a></li> <li><a href="#">海贼王</a></li> <li><a href="#">海贼王</a></li> </ul> </li> <li><a href="#" class="one">神探夏洛克</a></li> <li><a href="#" class="one">神探夏洛克</a></li> <li><a href="#" class="one">神探夏洛克</a></li> </ul> </div> </div> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <script> $(function(){ var verNav = $(".bl-vernav"), //第一层ul. line = verNav.siblings(".sideLine"), //左边条纹线 verNavFirst = verNav.children("li:first"), //第一层ul中第一个li curY = verNav.children("li.cur").position().top; line.height(verNavFirst.outerHeight()-1).width(verNavFirst.outerWidth());//设置辅助线初始化高度和宽度，也可以直接用css设置好，这里就不用js计算了 verNav.find("li").mouseenter(function(){ var thisY = $(this).position().top; line.stop(true,true).animate({top:thisY},200); return false }) .end() .mouseleave(function(){ line.stop(true,true).animate({top:curY},300) }).trigger("mouseleave"); }); </script> </body> </html>
