Home >Web Front-end >HTML Tutorial >The left stripe follows the mouse sliding navigation_html/css_WEB-ITnose
The left stripe follows the mouse sliding navigation_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:011326browse
The left stripe follows the mouse sliding navigation
Demo download address: http://pan.baidu.com/s/1ntqYXjr
The effect is as follows:
The code is as follows:
<!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