飞鱼 ^_^ 浆抱罗斯‘s blog

前几天做的jQuery实现N级导航菜单，实现起来超级简单，但是如果要将效果更丰富化的话，可能就不止这么点代码了。

于是乎，向笨笨先生(我哥)讨教了几番，得出了这么一个jquery menu 插件。代码依然很简单，稍微复杂点，可以在按钮放上去的时候触发一个动画效果，离开也可以触发一个动画效果，还添加了延迟释放效果(鼠标移开后有个缓冲，再消失)

代码如下：

(function($) { //N级导航插件
  $.fn.menu = function(options) {
    options = $.extend({
      delay: false
    }, options);

    this.find('li:has(ul)').hover(
      function() {
        var t = $(this);
        t.data('hide_menu', false);
        t.find('>ul').css('display', 'block'); // 可以换成动画效果
      },

      function() {
        var t = $(this);
        t.data('hide_menu', true);
        var hide_menu = function() {
          if (t.data('hide_menu')) {
            t.find('>ul').css('display', 'none'); // 可以换成动画效果
          }
        };
        options.delay ? setTimeout(hide_menu, options.delay)
            : hide_menu();
      }
    );
  };
})(jQuery);

代码非常简练，可以根据实际需求增加其他效果。
使用方法如下：

jQuery(function($) {  //调用插件
  //$('.menu').menu() //默认调用语法;
  $('.menu').menu({delay: 500}); //延迟500ms释放
})

PS：演示地址

您可能还对这些日志感兴趣

• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)
• 老汉推车 – jQuery中 trigger() & bind() 使用心得 (一)
• 乱翻乱教 – jQuery图片轮播插件 – 菜鸟版