【新作】JQuery 无限级超简单之下拉菜单插件iMenu

 

突然用到了下拉菜单，最近比较喜欢插件，到网上找了一些，但都不太好，要么写得臃肿，要么用起来不够简单，所以就自己写一个，于是iMenu诞生了。

我心目中的插件是这个样子滴：

1. 封装性好，只需要引入一个文件就可以了
2. 接口完善，可以灵活自定义插件的某些设置参数
3. 使用方便，除了引入文件，只需要做些必要的设置即可，或者可以不设置而使用默认值
4. 无侵入性，不需通过修改HTML代码来使用插件，插件与HTML耦合度必须最低

 

所以我写插件就是遵循以上几个原则来写的，即使不懂得javascript代码也可以很快的上手使用插件——这是我的目标。

写的过程中也遇到一些问题，首先遇到的一个就是应用效果的时候闪烁的问题，下拉层设为position:absolute的后，脱离了文档流，但是从它的父元素到子元素之间却触发了一次mouseout事件，按规则下拉层是要隐藏的，而接着又触发了mouseover事件（很快，也许是同时发生的）然后下拉层再次显示，于是产生了闪烁问题。

我的解决办法是延迟隐藏， 这样带来了不错的用户交互体验的同时可以很好地解决这个问题：通过在紧接着发生的mouseover事件中把隐藏动作取消。

朋友给了一个提示，使用hover事件，这个我本该想到的，使用这个的确可以很好地避免闪烁，但是同时也带来了另一个问题：显示和隐藏不能更灵活地自定义了，比如上面提到的延迟隐藏，当然也有该方法，但我想也需要使用setTimeout，倒不如直接使用mouseout和mouseover事件来控制更好一些。

我写了两个版本的，一个是用hover事件，另一个是使用两个事件，个人更喜欢后者。

下面介绍一下插件吧：

插件使用起来很简单，是一个JQuery插件，需要引入JQuery库和jquery.imenu.js文件，然后通过一句JS代码来指定谁是菜单：

$(“#menu”).imenu();

很简单，不需要改动你的HTML代码，当然，你可以随便用CSS来装饰你的菜单。

你也可以自定义显示和隐藏的样式，以及隐藏前延迟的时间（可以带来更好的用户体验）

    function menuShow(m) {
        m.slideDown(500);
    }
    function menuHide(m) {
        m.slideUp(500);
    }
    // 三个属性依次是：显示动画，隐藏动画，隐藏前延迟时间
    // 可以使用默认设置，三个属性都不是必须的
    // $(“#menu”).imenu();
    $(“#menu”).imenu(menuShow,menuHide,200);

源代码是未经压缩的，便于大家学习交流。不过代码是用英文注释的，自己实在讨厌乱码和来回切换输入法

下面该给出插件的下载地址了，两个版本：

jquery.imenu-1.1.js 这个是使用hover来实现的，没有隐藏前延迟这个参数。
jquery.imenu-1.2.js 这上是使用两个事件来实现的。
jquery.imenu.zip 这个包含了演示文件

附件列表

• jquery.imenu-1.1.js
• jquery.imenu-1.2.js
• jquery.imenu.zip