🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Yet another jQuery plugin for responsive, multi-level site navigation that automatically transforms the default nav list into a fullscreen, user-friendly hamburger menu in mobile view.

mobile-menu responsive-menu

Documentation

Menu.js v0.17

V 0.17版本说明:

修复主题参数失效bug; 修复公共参数height导致的二级菜单高度间隙问题; 

一、插件说明

  1. Menu.js是一款基于jQuery的轻量级响应式菜单插件,可以根据喜好进行个性化的UI定制。
    兼容性:支持Chrome、Safari、Firefox、IE7+ 等主流浏览器

  2. 支持响应式布局,可在移动端使用。

  3. 默认加载 fastclick.js,若页面中未引入也无影响,只是会降级到原生click事件,会有300ms延迟你懂的。

  4. 参数说明

    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'(字体颜色)

    二级菜单参数示例:

    • mSubBgColor: '#000'(背景颜色)
    • mSubFontColor: '#000'(字体颜色)

    公用参数示例:

    • mMaskColor: '#000'(遮罩层颜色)
    • mMenuBtnColor: '#000'(菜单按钮颜色)
    • closeIconColor: '#fff'(关闭按钮颜色)
    • animate: false(动画效果,默认关闭。支持:'fade')
    • speed: 200(动画速度,随animate属性而开合。支持:'fade'、'slide',单位:ms)
  5. 效果展示

二、使用说明

  1. 获取 menu:直接下载

  2. 引入 menu 样式

    <link rel="stylesheet" href="/path/menu.min.css"/> 
  3. 在 jQuery 之后引入 menu 插件

    <script src="/path/jquery-1.12.2.min.js"></script> <script src="/path/menu.min.js"></script>
  4. 粘贴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>
  5. 初始化 menu

    $(function() {   $('.ve-menu').menu({     // settting...   }); });

You May Also Like