郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

懒人建站提供网页素材下载、网站模板
这一切都是免费的!
当前位置:懒人建站 > javascript > 导航菜单 >

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

来源:jquery特效 作者: 懒人建站 日期:2014-01-05 人气:
仿淘宝UED的左边导航,这个导航有跟随鼠标滑动导航效果,鼠标离开导航区域自动回到当前导航状态。 /*样式表文件来自 懒人css http://lrcss.lrjz100.com */ 下面是懒人css中的竖向导航菜单样
仿淘宝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特效整理发布
本文链接:左边跟随鼠标滑动导航仿淘宝UEDhttp://www.51xuediannao.com/js/nav/715.html

(责任编辑:懒人建站)

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

web前端开发就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 副煌瞬74
    2015-10-28 23:09:38发表

    [心]

  • 大胆秀火辣
    2015-10-09 09:48:28发表

    顶.支持,路过!