jquery-menu是一款简单的jquery右键菜单插件。通过jquery-menu右键菜单插件，你可以在指定的页面区域内制作右键菜单或左键菜单效果，非常方便。jquery-menu右键菜单插件的特点还有：

• 支持键盘操作。
• 右键菜单会始终停留在视口内。
• 支持无穷子菜单。
• 允许禁用某个菜单项或整个菜单。
• 允许在菜单分组间添加分割线。
• 支持右键菜单和左键菜单。
• 多个元素可以共享一个菜单。
• 菜单会根据内容自动缩放大小。
• 每个菜单都提供各种自的回调函数。

使用方法

在页面中引入jquery和jquery-menu.js文件，以及jquery-menu.css文件。

<link rel="stylesheet" type="text/css" href="css/jquery-menu.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery-menu.js"></script>                  
                

HTML结构

一个右键菜单的基本HTML结果如下：

<div id="simpleCallbackMenu">
    <ul>
        <li id="MenuItem1"><a href="#Item1">Menu Item 1</a></li>
        <li id="MenuItem2"><a href="#Item2">Menu Item 2</a></li>
        <li id="MenuItem3"><a href="#Item3">Menu Item 3</a>
        <ul>
            <li id="MenuItem3.1"><a href="#Item3.1">Menu Item 3.1</a></li>
            <li id="MenuItem3.2"><a href="#Item3.2">Menu Item 3.2</a></li>
            <li id="MenuItem3.3"><a href="#Item3.3">Menu Item 3.3</a>
            <ul>
                <li id="MenuItem3.3.1"><a href="#Item3.3.1">Menu Item 3.3.1</a></li>
                <li id="MenuItem3.3.2"><a href="#Item3.3.2">Menu Item 3.3.2</a></li>
                <li id="MenuItem3.3.3"><a href="#Item3.3.3">Menu Item 3.3.3</a></li>
                <li id="MenuItem3.3.4"><a href="#Item3.3.4">Menu Item 3.3.4</a></li>
            </ul>
            </li>
            <li id="MenuItem3.4"><a href="#Item3.4">Menu Item 3.4</a></li>
        </ul>
        </li>
        <li id="MenuItem4" class="separator"><a href="#Item4">Menu Item 4</a></li>
    </ul>
</div>
                

初始化插件

在你需要使用右键菜单的元素上，通过catMenu()方法来实例化一个右键菜单。

$('#simpleCallback').catMenu({
    menu: 'simpleCallbackMenu'
});
                

配置参数

jquery-menu右键菜单插件的可用配置参数如下：

回调函数

jquery-menu右键菜单插件的github地址为：https://github.com/sizeofcat/jquery-menu

在线预览    源码下载