五二脚本 手机端 m.52jb.net
特色栏目:PHP教程JavaScript正则表达式焦点幻灯片
页面导航:首页 > 网页特效 > 导航菜单 > 正文内容

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

来源:52脚本网发布时间:12-06浏览:1356 次
仿淘宝UED的左边导航,这个导航有跟随鼠标滑动导航效果,鼠标离开导航区域自动回到当前导航状态。
仿淘宝UED 左边跟随鼠标滑动的导航菜单

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

/*样式表文件*/
下面是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支持哦

//52脚本网制造
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
})
关于我们 - 联系我们 - 广告合作 - 网站地图 - 网站声明

QQ群:153638182  投稿邮箱: 578640261@qq.com  皖ICP备-14005058

严禁网站镜像,否则追究法律责任。未经www.52jb.net 同意,不得转载本网站上所有的源代码。

五二脚本每日更新大量关于网页制作网页特效php编程网站优化源码下载的实例教程。