这是一款响应式的多级导航菜单jQuery插件。该多级导航菜单在大屏幕中以正常的导航菜单形式出现，当屏幕尺寸小于某个设定的值时，导航菜单会收缩为下拉菜单列表，非常适合用于制作响应式网站的菜单。
插件中只提供了基本的CSS样式，菜单的样式可以通过CSS来完全自定义。
使用方法
首先要引入jQuery和responsive-menu.js文件，以及基本的菜单CSS样式文件responsive-menu.css。
<link href="css/responsive-menu.css" rel='stylesheet' type='text/css'/>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/responsive-menu.js"></script>
HTML结构
该响应式多级导航菜单的建议HTML结构如下：
<div class="rm-container">
<a class="rm-toggle rm-button rm-nojs" href="#">Menu</a>
<nav class="rm-nav rm-nojs rm-lighten">
<ul>
<li>menu-1</li>
<li>menu-2</li>
...
</ul>
</nav>
</div>
初始化插件
在页面加载完毕之后，可以使用下面的方法来初始化该响应式导航菜单插件。
jQuery(function ($) {
var menu = $('.rm-nav').rMenu({
// Optional Settings
minWidth: '960px',
});
});
配置参数
| 参数 | 默认值 | 描述 |
| minWidth | '769px' | 最小宽度，与CSS文件中的 media query 匹配。如果不使用Modernizr，必须带像素单位 |
| transitionSpeed | 400 | 打开关闭菜单的速度，单位毫秒 |
| jqueryEasing | 'swing' | jQurey easing函数，可选值有'swing', 'linear' |
| css3Easing | 'ease' | CSS3 easing动画 |
| toggleBtnBool | true | 是否使用按钮作为链接，取代文字 |
| toggleSel | '.rm-toggle' | 切换链接按钮的选择器 |
| menuSel | 'ul' | 菜单和子菜单的选择器 |
| menuItemsSel | 'li' | 菜单项的选择器 |
| containerClass | 'rm-container' | nav元素的包裹容器的class名称 |
| navElementClass | 'rm-nav' | nav元素的class名称 |
| topMenuClass | 'rm-top-menu | 顶级菜单的class名称 |
| parentClass | 'rm-parent' | 带有子菜单的父菜单的class名称 |
| expandedClass | 'rm-layout-expanded' | 包裹容器元素用于触发菜单展开的class名称 |
| contractedClass | 'rm-layout-contracted' | 包裹容器元素用于触发菜单收缩的class名称 |
| animateClass | 'rm-css-animate' | 使用CSS3 animation/transitions的class名称 |
| accelerateClass | 'rm-accelerate' | 强制GPU加速的class名称 |
| developmentMode | 使用开发模式 | false |
更多关于该响应式导航菜单的信息请参考：https://github.com/jbowyers/responsive-menu
