当前位置:主页 > 网页特效 > 菜单导航 >

jQuery响应式多级导航菜单插件

发布时间:2018/08/03 来源:互联网 浏览: 关键词:响应式 jquery 菜单导航 多级菜单 
jQuery响应式多级导航菜单插件 jQuery响应式多级导航菜单插件
阿里云

简要教程

这是一款响应式的多级导航菜单jQuery插件。该多级导航菜单在大屏幕中以正常的导航菜单形式出现,当屏幕尺寸小于某个设定的值时,导航菜单会收缩为下拉菜单列表,非常适合用于制作响应式网站的菜单。

插件中只提供了基本的CSS样式,菜单的样式可以通过CSS来完全自定义。

使用方法

首先要引入jQuery和responsive-menu.js文件,以及基本的菜单CSS样式文件responsive-menu.css。

<linkhref="css/responsive-menu.css"rel='stylesheet'type='text/css'/>
<scriptsrc="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/responsive-menu.js"></script>   

HTML结构

该响应式多级导航菜单的建议HTML结构如下:

<divclass="rm-container">
    <aclass="rm-toggle rm-button rm-nojs"href="#">Menu</a>
    <navclass="rm-nav rm-nojs rm-lighten">
        <ul>
          <li>menu-1</li>
          <li>menu-2</li>
          ...
        </ul>
    </nav>
</div>  

初始化插件

在页面加载完毕之后,可以使用下面的方法来初始化该响应式导航菜单插件。

jQuery(function($) {
    varmenu = $('.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

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top