三款jquery 导航菜单(利用jquery导航插件)

2016-02-22    编辑:kp12345     点击(
以 WordPress 自带主题 default 为基础, 仅做学习参考使用, 修改过的文件有 header.php 和 style.css,

添加了文件 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>