V 0.17版本说明:
修复主题参数失效bug;
修复公共参数height导致的二级菜单高度间隙问题;
Menu.js是一款基于jQuery的轻量级响应式菜单插件,可以根据喜好进行个性化的UI定制。
兼容性:支持Chrome、Safari、Firefox、IE7+ 等主流浏览器
支持响应式布局,可在移动端使用。
默认加载 fastclick.js,若页面中未引入也无影响,只是会降级到原生click事件,会有300ms延迟你懂的。
参数说明
一级菜单参数示例:
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 样式
1 | < link rel = "stylesheet" href = "/path/menu.min.css" /> |
在 jQuery 之后引入 menu 插件
1 2 | < script src = "/path/jquery-1.12.2.min.js" ></ script > < script src = "/path/menu.min.js" ></ script > |
粘贴html代码块
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < 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
1 2 3 4 5 | $( function () { $( '.ve-menu' ).menu({ // settting... }); }); |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com