这是一款响应式的多级导航菜单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