网站地图
【www.gdgbn.com--jquery】
添加了文件 js/menu.js
所有只提供了jquery 导航菜单代码，css 等就不写了。
*/
//鼠标划过显示菜单, 离开隐藏菜单
jquery(document).ready(function(){
// 找到所有菜单, 并添加显示和隐藏菜单事件
jquery("#menus > li").each(function(){
jquery(this).hover(
// 显示菜单
function(){
jquery(this).find("ul:eq(0)").show();
},
// 隐藏菜单
function(){
jquery(this).find("ul:eq(0)").hide();
}
);
});
});
//滚动导航菜单
//鼠标悬停显示滚动展开菜单, 离开滚动卷起菜单. 需要加上延迟处理, 原因同淡出淡入导航菜单的处理
var mouseo教程ver_tid = [];
var mouseout_tid = [];
jquery(document).ready(function(){
jquery("#menus > li").each(function(index){
jquery(this).hover(
// 取消卷起菜单的线程, 延时展开菜单
function(){
var _self = this;
cleartimeout(mouseout_tid[index]);
mouseover_tid[index] = settimeout(function() {
jquery(_self).find("ul:eq(0)").slidedown(200);
}, 400);
},
// 取消展开菜单的线程, 延时卷起菜单
function(){
var _self = this;
cleartimeout(mouseover_tid[index]);
mouseout_tid[index] = settimeout(function() {
jquery(_self).find("ul:eq(0)").slideup(200);
}, 400);
}
);
});
});
// 淡出淡入导航菜单
var mouseover_tid = [];
var mouseout_tid = [];
jquery(document).ready(function(){
jquery("#menus > li").each(function(index){
jquery(this).hover(
// 取消淡出菜单的线程, 延时淡入菜单
function(){
var _self = this;
cleartimeout(mouseout_tid[index]);
mouseover_tid[index] = settimeout(function() {
jquery(_self).find("ul:eq(0)").fadein(200);
}, 400);
},
// 取消淡入菜单的线程, 延时淡出菜单
function(){
var _self = this;
cleartimeout(mouseover_tid[index]);
mouseout_tid[index] = settimeout(function() {
jquery(_self).find("ul:eq(0)").fadeout(200);
}, 400);
}
);
});
});
//
</script>