Home > Article > Web Front-end > 左边条纹跟随鼠标滑动导航_html/css_WEB-ITnose
左边条纹跟随鼠标滑动导航_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:011248browse
左边条纹跟随鼠标滑动导航
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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS知识总结之设计模式（持续学习中）_html/css_WEB-ITnoseNext article：关于HTML中浮动与清除的思考_html/css_WEB-ITnose