三款jquery 導覽功能表（利用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>