最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
三款jquery 导航菜单(利用jquery导航插件)
时间:2010-10-18 编辑:简简单单 来源:一聚教程网
添加了文件 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);
}
);
});
});
//
-
上一个: 相册焦点图片切换效果代码
相关文章
- 基于jQuery浮动导航菜单特效代码 12-18
- 基于jQuery弹性滑动导航菜单效果代码 05-28
- jquery二级导航条菜单效果代码 04-25
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31