/jqueryMenu/zjdaima-bg-221192754.png)
一、插件说明
- Menu.js是一款基于jQuery的轻量级响应式菜单插件,可以根据喜好进行个性化的UI定制。
- 兼容性:支持Chrome、Safari、Firefox、IE7+ 等主流浏览器
- 支持响应式布局,可在移动端使用。
- 默认加载 fastclick.js,若页面中未引入也无影响,只是会降级到原生click事件,会有300ms延迟你懂的。
参数说明
PC端参数示例:
一级菜单参数示例:
- fontSize: '16px'(字体大小)
- fontColor: '#fff'(字体颜色)
- bgColor: '#0E90D2'(背景颜色)
- hoverFontColor: '#fff'(鼠标悬浮字体颜色)
- hoverBgColor: '#0C79B1'(鼠标悬浮背景颜色)
- itemSpace: 1(菜单间隙,默认1px)
二级菜单参数示例:
- subFontSize: '16px'(字体大小)
- subFontColor: '#fff'(字体颜色)
- subBgColor: '#0E90D2'(背景颜色)
- subHoverFontColor: '#fff'(鼠标悬浮字体颜色)
- subHoverBgColor: '#0C79B1'(鼠标悬浮背景颜色)
公用参数示例:
- height: 40(菜单高度,默认40px)
- itemWidth: 20(菜单宽度:除去自身内容的宽度之外,附加的横向宽度,默认20px)
- theme: 'blue'(主题:blue | dark,默认为blue
移动端参数示例:
一级菜单参数示例:
- mBgColor: '#000'(背景颜色)
- mFontColor: '#000'(字体颜色)
二级菜单参数示例:
- mSecondBgColor: '#000'(背景颜色)
- mSecondFontColor: '#000'(字体颜色)
公用参数示例:
- mMaskColor: '#000'(遮罩层颜色)
- mMenuBtnColor: '#000'(菜单按钮颜色)
- closeIconColor: '#fff'(关闭按钮颜色)
- animate: false(动画效果,默认关闭。支持:'fade')
- speed: 200(动画速度,随animate属性而开合。支持:'fade'、'slide',单位:ms)
二、使用说明
引入 menu 样式
<link rel="stylesheet" href="/path/menu.min.css"/>
在 jQuery 之后引入 menu 插件
<script src="/path/jquery-1.12.2.min.js"></script>
<script src="/path/menu.min.js"></script>
粘贴html代码块
<div class="ve-menu">
<ul class="ve-menu-pc">
<li><a href="#">link</a></li>
<li><a href="#">link</a>
<ul>
<li><a href="#">aaa</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
</ul>
</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
初始化 menu
$(function() {
$('.ve-menu').menu({
// settting...
});
});