首先非常感谢网友淡如水的无私分享，一直都很喜欢JquerySchool的导航菜单，今天花时间用jquery模仿做了一个，感觉还行，和大家分享一下,实现功能的代码量也很少，大家下载下来看一下就明白了。。。
jquery功能代码如下：
$(document).ready(function(e) {
var navLi = $("#nav-div ul li"),
navUl = $("#nav-div ul"),
speed = 200;
function OnClick(){
n = navUl.find("li.on").index();
navUl.stop().animate({backgroundPosition:navLi.width()*n},speed);
}
OnClick();
navLi.hover(
function(){
n = $(this).index();
navUl.stop().animate({backgroundPosition:navLi.width()*n},speed);
},
function(){
OnClick();
})
navLi.click(function(){
$(this).addClass("on").siblings().removeClass("on")
});
$(window).scroll(function() {
if($(window).scrollTop() > $("#nav").height()+50){
$("#nav").addClass("scoll_nav")
}
else{
$("#nav").removeClass( "scoll_nav")
}
});
})
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友淡如水 导航菜单 滑动插件 动画插件 二级菜单 鼠标悬浮 悬停特效