jQuery右键菜单导航加悬停效果演示及代码下载
发布时间：2016-01-10 14:01 来源：ITJS
这是一款jQuery右键菜单导航效果的代码，样式基于bootstrap，效果实现分两步：1、右键点击出现菜单，2、点击菜单项，悬停显示相关信息介绍（即蓝色信息），效果简洁大方，具体可见演示。
插件描述：Bootstrap Context Menu是一款非常实用的基于Bootstrap的jQuery右键上下文菜单插件。该右键菜单插件可以在多种元素上触发，也可以配合Font Awesome字体图标一起使用，非常的方便。
可以通过npm来安装Bootstrap Context Menu插件。
npm install bootstrap-menu
使用方法
使用该右键上下文菜单插件需要引入Bootstrap相关依赖文件和jQuery以及BootstrapMenu.min.js文件
<script src="js/jquery.min.js"></script> <script src="js/BootstrapMenu.min.js"></script>
初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化右键菜单。
var menu = new BootstrapMenu('#dropdownButton', {
actions: /* ... */
});
应用举例
BootstrapMenu的构造函数第一个参数接收一个字符串格式的元素选择器，第二个参数是一个options参数对象。
options对象必须至少有一个actions数组，数组中包含右键菜单的action。
var menu = new BootstrapMenu('#button', {
actions: [{
name: 'Action',
onClick: function() {
// run when the action is clicked
}
}, {
name: 'Another action',
onClick: function() {
// run when the action is clicked
}
}, {
name: 'A third action',
onClick: function() {
// run when the action is clicked
}
}]
});
第一步
第二步（该蓝色内容只做短时悬停，之后会自动消失。）
