Heim > Artikel > Web-Frontend > 左边条纹跟随鼠标滑动导航_html/css_WEB-ITnose
左边条纹跟随鼠标滑动导航_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:011299Durchsuche
左边条纹跟随鼠标滑动导航
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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS知识总结之设计模式（持续学习中）_html/css_WEB-ITnoseNächster Artikel：关于HTML中浮动与清除的思考_html/css_WEB-ITnose