responsive-menu.js - jQuery响应式多级导航菜单
  • 分享到微信朋友圈
    X
立即下载 查看演示

responsive-menu.js是一款响应式的多级导航菜单jQuery插件。 导航是一个完整网站必不可少的一个部分，我们可以使用div+css制作2级导航下拉菜单， 那么如何制作三级下拉菜单呢，使用div+css实现会很麻烦，这里我分享了一个三级下拉菜单效果。 responsive-menu 这个库以CSS、div和jQuery为基础， 提供了优雅的解决方案，适用于制作响应式网站的菜单。

插件中提供了基本的CSS样式，可以通过CSS来自定义样式。

responsive-menu调用

<script>
	jQuery(function ($) {
		var menu = $('.rm-nav').rMenu({
			minWidth: '960px',
		});
	});
</script>

更多配置参数

  • 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