左边跟随鼠标滑动导航仿淘宝UED

作者：佳明妈来源：jquery特效 2014-01-05 人气：

仿淘宝UED的左边导航，这个导航有跟随鼠标滑动导航效果，鼠标离开导航区域自动回到当前导航状态。 /*样式表文件来自懒人css http://lrcss.lrjz100.com */ 下面是懒人css中的竖向导航菜单样

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左边跟随鼠标滑动导航仿淘宝UED - 懒人建站</title>
<meta name="keywords" content="滑动导航" />
<meta name="description" content="左边跟随鼠标滑动导航仿淘宝UED" />
<style>
/*样式表文件来自 懒人css http://lrcss.lrjz100.com */
/*---------重置---------*/
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-warp{ position:relative;}
	.bl-vernav-warp .auxline{ 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">仿淘宝UED的左边跟随鼠标滑动导航</h1>
    <br/>
    <div class="bl-vernav-warp">
    	<div class="auxline"></div>
        <ul class="bl-vernav vernav-level">
            <li><a href="http://www.51xuediannao.com/js/nav/" class="one">导航菜单</a></li>
            <li class="cur">
                <a href="http://www.51xuediannao.com/js/" class="one">JS代码</a>
                <ul>
                    <li><a href="http://www.51xuediannao.com/js/texiao/">网页特效</a></li>
                    <li><a href="http://www.51xuediannao.com/js/gundong/">滚动代码</a></li>
                    <li><a href="http://www.51xuediannao.com/xuanxiangka/">选项卡代码</a></li>
                </ul>
            </li>
            <li><a href="http://www.51xuediannao.com/js/slide/" class="one">焦点幻灯片</a></li>
            <li><a href="http://www.51xuediannao.com/qqkefu/" class="one">qq在线客服代码</a></li>
            <li><a href="http://www.51xuediannao.com/jquery_tanchu/" class="one">jquery弹出层</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
	var verNav = $(".bl-vernav"),
		line = verNav.siblings(".auxline")
		verNavFisrt = verNav.children("li:first-child"),
		curY = verNav.children("li.cur").position().top;
		
	line.height(verNavFisrt.outerHeight()-1).width(verNavFisrt.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>

仿淘宝UED的左边导航，这个导航有跟随鼠标滑动导航效果，鼠标离开导航区域自动回到当前导航状态。

/*样式表文件来自懒人css http://lrcss.lrjz100.com */
下面是懒人css中的竖向导航菜单样式

/*---------竖向菜单（非必需）---------*/

.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; }

这个导航的鼠标滑动跟随导航效果js代码如下
需要jquery支持哦

//懒人建站制造

var verNav = $(".bl-vernav"),

line = verNav.siblings(".auxline")

verNavFisrt = verNav.children("li:first-child"),

curY = verNav.children("li.cur").position().top;

line.height(verNavFisrt.outerHeight()-1).width(verNavFisrt.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");

完整的jquery导航代码效果请查看上面的代码框。

jquery特效整理发布

↓ 查看全文

本文链接：左边跟随鼠标滑动导航仿淘宝UEDhttps://www.51xuediannao.com/js/nav/715.html

左边跟随鼠标滑动导航仿淘宝UED由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

上一篇：jquery弹出下拉菜单插件弹出层相对于自身的父层
下一篇：没有了

左边跟随鼠标滑动导航仿淘宝UED

左边跟随鼠标滑动导航仿淘宝UED-最新评论

导航菜单-热门文章

导航菜单-推荐文章

活跃用户

左边跟随鼠标滑动导航仿淘宝UED

左边跟随鼠标滑动导航仿淘宝UED-相关文章

左边跟随鼠标滑动导航仿淘宝UED-最新评论

导航菜单-热门文章

导航菜单-推荐文章

活跃用户