这是一款响应式的多级导航菜单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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!