Mmenu是一个简单而强大的JavaScript/jQuery插件，用于为您的移动网站创建响应迅速、可访问、模块化、灵活、移动友好和类似应用程序的滑动菜单，所有这些都具有无限数量的子菜单。

它支持垂直或水平滑动子菜单和固定标题。

根据CC-BY-NC-4.0许可证进行许可。兼容Bootstrap 4和Bootstrap 3。

该插件还附带了Light（紧凑型）版本，您可以在此处查看mmenu Light插件。

重要提示：

最新的Mmenu（8.0+）已经删除了jQuery依赖项。

对于jQuery用户，请在此处下载Mmenu 7.x。

查看更多信息：

• 前50个画布外导航jQuery插件

参见：

• jQuery mhead：一个漂亮的移动导航标题，伴随着你网站和网络应用程序上的jQuery.menu导航菜单。
• Mmenu Light：Mmenu插件的最低版本。

安装：

# NPM
$ npm install jquery.mmenu

# Bower
$ bower install jquery.mmenu

如何使用它:

1.在网页上包含Mmenu插件的JavaScript。

<!-- v8 Vanilla JS Version -->
<!-- polyfills are needed for Internet Explorer 10 and 11 -->
<script src="mmenu.js"></script>
<script src="mmenu.polyfills.js"></script>
<!-- v7 jQuery Version -->
<script src="jquery.min.js"></script>
<script src="jquery.mmenu.js"></script>

2.在页面上包含所需的CSS文件。

<!-- v8 Vanilla JS Version -->
<link rel="stylesheet" href="mmenu.css" />
<!-- v7 jQuery Version -->
<link rel="stylesheet" href="jquery.mmenu.css" />

3.在页面上包含您选择的扩展。所有可能的CSS扩展：

• 注释.borderstyle.css：在菜单中添加缩进边框。可用样式：“border-full”和“border-none”。
• 注释.effects.css：应用将附加效果应用到菜单。可用样式：“fx菜单幻灯片”、“fx面板无”、“fx-panels-slide-0”、“fx-panels-slide-100”。
• 注释.全屏.css：启用全屏菜单。
• 注释.listview.css：使菜单项垂直对齐。可用样式：“列表视图对齐”。
• 注释.多行.css：将菜单项截断为一行。
• 注释.pagedim.css：把页面调暗。可用样式：“pagedim”、“pagedimwhite”、“page dim black”。
• 注释.popup.css：以弹出方式打开菜单。
• 注释.positioning.css：重新定位菜单。可用样式：“位置右侧”、“位置顶部”、“定位底部”、“放置前部”。
• mmenu.shadows.css:在菜单中添加阴影效果。可用样式：“影子菜单”、“影子页面”、“阴影面板”。
• 注释.themes.css：其他主题。可用主题：“主题浅色”、“主题深色”、“黑色主题”、“白色主题”。
• 注释.文件视图.css：启用平铺视图布局。可用样式：“mm tileview xs”、“mm tilreview-s”、“mm-tileview-l”、“毫米tileview xl”。

// v8 Vanilla JS Version
document.addEventListener(
  "DOMContentLoaded", () => {
    new Mmenu( "nav#menu",{
        extensions: ["border-full"]
    });
  }
);

// v7 jQuery Version
$(function() {
  $('nav#menu').mmenu({
    extensions: ["border-full"]
  });
});

4.为菜单创建一个导航列表。该插件支持使用嵌套HTML列表的多级导航菜单。

<nav id="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><span>About us</span>
      <ul>
        <li><a href="#">History</a></li>
        <li><span>The team</span>
          <ul>
            <li><a href="#">Management</a></li>
            <li><a href="#">Sales</a></li>
            <li><a href="#">Development</a></li>
          </ul>
        </li>
        <li><a href="#">Our address</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li class="Divider">Other demos</li>
    <li><a href="#">Advanced demo</a></li>
  </ul>
</nav>

5.创建一个汉堡包按钮来切换菜单。

<a href="#menu"><span></span></a>

6.将插件附加到导航列表以初始化mmenu。

// v8 Vanilla JS Version
document.addEventListener(
  "DOMContentLoaded", () => {
    new Mmenu( "nav#menu" );
  }
);

// v7 jQuery Version
$(function() {
  $('nav#menu').mmenu();
});

7.自定义菜单的默认选项。

new Mmenu( "nav#menu",{

      // A collection of extension names to enable for the menu.
      extensions: [],

      // navbar options
      navbar: {
        add: true,
        sticky: true,
        title: "Menu",
        titleLink: "parent"
      },

      onClick: {
        // whether or not the menu should close after clicking a link inside it.
        close: false,
        // prevent the default behavior for the clicked link
        preventDefault: null,
        // the clicked link should be visibly "selected".
        setSelected   : true
      },

      // the submenus comes sliding in from the right.
      slidingSubmenus: true,

      // a collection of framework wrappers to enable for the menu.
      wrappers: [],

      // off-canvas addon options
      offCanvas: {
        // Whether or not to block the user from using the page while the menu is opened.
        // If set to "modal", clicking outside the menu does not close it.
        blockUI: true,
        // Whether or not the page should inherit the background of the body when the menu opens.
        moveBackground: true
      },

      // Screen reader addon options
      screenReader: {
        // Whether or not to automatically add and update the aria-hidden and aria-haspopup attributes.
        aria: true ,
        // Whether or not to add a "screen reader only" text for anchors that normally don't have text.
        text: true
      },

      // Scroll bug fix addon options
      scrollBugFix: {
        fix: true // fix the scroll bug on touchscreens
      }

});

8.可以作为第三个参数传递给mmenu方法的可能配置。

new Mmenu( "nav#menu",{
    // options here
},{
    // CSS classes
    classNames: {
      divider: "Divider",
      inset: "Inset",
      panel: "Panel",
      selected: "Selected",
      spacer: "Spacer",
      vertical: "Vertical"
    },

    // supported languages: "de", "en", "fa", "nl", "ru"
    language: 'en',

    // The number of milliseconds between opening/closing the menu and panels,
    // needed to force CSS transitions.
    openingInterval: 25,

    // jQuery selector containing the node-type of panels.
    panelNodetype: 'ul, ol, div',

    // The number of milliseconds used in the CSS transitions.
    transitionDuration: 400,

    // off-canvas addon configs
    offCanvas: {
      // Whether or not to clone the original menu
      clone: false,
      // Whether or not the page should inherit the background of the body when the menu opens.
      menu: {
        // how to insert the menu
        // "prepend" or "append"
        insertMethod: "prepend",
        // where to insert the menu
        insertSelector: "body"
      },
      page: {
        // page node
        nodetype: "div",
        // default selector
        selector: "body > ",
        // array of query selectors to exclude from the page.
        noSelector: []
      },
    },

    // Screen reader addon configs
    screenReader: {
      text: {
        closeMenu: "Close menu",
        closeSubmenu: "Close submenu",
        openSubmenu: "Open submenu",
        toggleSubmenu: "Toggle submenu"
      }
    }

});

9.API方法。

// v8 Vanilla JS Version
document.addEventListener(
  "DOMContentLoaded", () => {
    const myMenu = Mmenu( "nav#menu");
    const api = myMenu.API;
  }
);

// v7 jQuery Version
$(function() {
  var $myMenu = $('nav#menu').mmenu();
  var api = $myMenu.data( "mmenu" );
});

// close all menus
api.closeAllPanels();

// close a specific menu
api.closePanel(Panel);

// initialize a new menu
api.initPanel(Panel);

// select an item
api.setSelected(listitem);

10.事件处理程序。

// v8 Vanilla JS Version
document.addEventListener(
  "DOMContentLoaded", () => {
    new Mmenu( "nav#menu",{
        hooks: {

          "closeAllPanels:before": ( panel ) => {
            // do something
          },
          "closeAllPanels:after": ( panel ) => {
            // do something
          },
          "closePanel:before": ( panel ) => {
            // do something
          },
          "closePanel": ( panel ) => {
            // do something
          },
          "closePanel:after": ( panel ) => {
            // do something
          },
          "openPanel:before": ( panel ) => {
            // do something
          },
          "openPanel:start": ( panel ) => {
            // do something
          },
          "openPanel:finish": ( panel ) => {
            // do something
          },
          "openPanel:after": ( panel ) => {
            // do something
          },
          "setSelected:before": ( panel ) => {
            // do something
          },
          "setSelected:after": ( panel ) => {
            // do something
          },

        }
    });
  }
);

// v7 jQuery Version
$(function() {
  var $myMenu = $('nav#menu').mmenu();
  var api = $myMenu.data( "mmenu" );
  api.on(EVENTNAME,
    ( panel ) => {
      // do something
    });
  )
});

替代插件：

• 类似YouTube的左侧下拉菜单效果
• JS库用于Facebook风格的侧面板菜单-Snap.JS
• jQuery简单滑出和抽屉效果插件
• 具有滑动和推动效果的酷炫动画侧菜单
• 简单且支持触摸的响应式导航菜单插件
• 用于响应式侧菜单的jQuery插件-sidr
• 三维和节省空间的菜单-Meny
• 面板样式导航菜单插件-jPanelMenu
• 用于响应式页面幻灯片菜单的jQuery插件-页面幻灯片

更新日志：

版本9.3.0（2023-01-07）

• 更新的程序包

版本9.2.3（2022-12-24）

• 后退按钮固定

版本9.2.2（2022-11-21）

• 添加了乌克兰语翻译

版本9.2.1（2022-11-14）

• 使现代化

版本9.2.0（2022-08-19）

• 开始使用惰性属性以获得更好的可访问性（并减少逻辑以获得相同的结果）。
• 删除了选项sidbar.collapsed.blockMenu，以支持使用惰性属性。
• 删除了选项iconpanels.blockPanel以支持使用惰性属性。
• 将主题逻辑从画布外的附加组件移动到其自己的附加组件。
• 添加了searchfield.search选项。
• 向API添加了主题方法。
• 修复了一个打开垂直子菜单的错误。
• 修正了在垂直子菜单中计数列表项的错误。
• 修复了一个在不同位置有多个菜单的错误。

版本9.1.6（2022-04-06）

• 滚动定位

版本9.1.5（2022-04-05）

• 搜索修复程序

版本9.1.2/3/4（2022-04-03）

• 焦点修复，范围较短的变量

版本9.1.1（2022-03-24）

• 错误修复

版本9.1.0（2022-03-05）

• 将定位扩展名移动到offCanvas.position选项。
• 已将主题扩展移到主题选项。
• 已删除全屏扩展。
• 为每个主题添加了高对比度版本。

版本9.0.4（2022-02-01）

• 画布外修复

版本9.0.3（2022-01-28）

• 修复了为克隆菜单创建唯一id的错误

v9.0.0/1 (2021-11-25)

• 改进了键盘导航，也不再是单独的附加组件。
• 改进了对屏幕阅读器的支持，也不再是单独的附加组件。
• 改进了打开和关闭面板的逻辑。
• 打开和关闭菜单和面板现在可以在没有超时的情况下工作。
• 已放弃对IE11的支持。
• 改进了现代浏览器的CSS。
• 更新了Typescript和SASS。
• 修饰语的B.E.M.符号转换。
• 删除了jQuery插件。
• 小的改进和错误修复。
• 删除了导航条的粘性选项，默认情况下导航条现在是粘性的。
• 已从API中删除initListview、initPanel和closeAllPanels方法。
• ：before API钩子现在只在方法实际执行某些操作时调用。
• 从API中删除了openPanel:start、openPanel:finish、open:start，open:finish，close:start和close:finish，initAnchors:before和initAnchors：after挂钩。
• 删除了大多数SCSS变量，转而使用CSS变量。剩余的SCSS变量将从文档中删除。
• 删除了顶部偏移-毫米、左侧偏移-毫米和右侧偏移-毫米的CSS变量。
• 改进了searchfield插件。
• 将分隔符、键盘导航和切换附加组件移动到核心。
• 从offcanvas插件中删除了moveBackground和blockUi选项。
• 侧边栏插件的扩展初始选项不再支持值“记住”。
• 删除了autoheight、columns、dividers、drag、dropdown、fixdelements和lazysubmenus加载项，因为它们要么过时，要么超出范围，要么太不兼容。
• 删除了borderstyle、effect、listview、multiline、pagedim、popup和shadows扩展，因为它们要么过时了，要么超出了范围，要么很容易使用自定义CSS进行复制。
• 删除了所有包装。

v8.5.24 (2021-06-22)

• 错误修复

v8.5.23 (2021-05-07)

• 修复可访问性问题

v8.5.22 (2021-03-22)

• 使现代化

v8.5.21 (2021-01-18)

• 使现代化

版本8.5.20（2020-11-15）

• 使现代化

第8.5.19版（2020-10-16）

• 使现代化

第8.5.18版（2020-10-04）

• 修复了缺失的polyfill

第8.5.17版（2020-09-22）

• 修复了滚动错误

第8.5.16版（2020-09-02）

• 已更新

第8.5.15版（2020-08-20）

• Bugfixed（错误修复）

第8.5.14版（2020-07-10）

• Bugfixed（错误修复）

第8.5.12版（2020-06-01）

• 修复了缺失的polyfill

第8.5.11版（2020-05-25）

• 错误修复

第8.5.10版（2020-05-20）

• 图标栏固定

第8.5.9版（2020-05-14）

• 已更新

第8.5.8版（2020-05-13）

• 垂直子菜单的滚动错误修复

第8.5.5版（2020-04-26）

• 图标栏+滚动错误修复改进

第8.5.4版（2020-04-17）

• lazysubmenus修复

第8.5.3版（2020-03-22）

• 固定搜索字段

第8.5.2版（2020-03-17）

• 删除了tileview遗留代码

第8.5.1版（2020-03-12）

• 删除了tileview遗留代码

第8.5.0版（2020-02-28）

• 已删除Tileview扩展。
• 删除了导航栏插件的下一个内容。
• 修正了导航栏插件标题内容中的错误。
• 小的改进和错误修复。

第8.4.7版（2020-02-13）

• 固定的聚乙烯填充物。

第8.4.6版（2020-01-08）

• 固定用于IE 10/11。

第8.4.5版（2019-12-30）

• 拖动加载项错误修复

第8.4.4版（2019-12-22）

• 修复未定义的面板

第8.4.3版（2019-11-25）

• 更好的标题修复

第8.4.2版（2019-11-24）

• 固定详题

第8.4.1版（2019-10-25）

• 已更新

第8.3.0版（2019-09-06）

• 添加了navbar.sticky选项。
• 导航栏和导航栏插件的简化CSS。
• 修正了导航栏中的填充错误。
• 修复了组合位置右侧和全屏扩展的错误。
• pageScroll插件中的错误修复。
• dropDown插件中的错误修复。
• 修复了列表视图扩展中的错误。
• 已将SCSS变量$mm_btnSize更改为50px。
• 已将SCSS变量$mm_listitemSize更改为44px。
• 已将SCSS变量$mm_navbarSize更改为$mm_listitemSize。
• 添加了SCSS变量$mm_include_navbars_searchfield。
• 添加了polyfills.js文件以支持IE11。
• 为支持IE11添加了CSS变量的回退。
• 更新了拖拽插件并删除了对Hammer.js的依赖。
• 删除了对部分使用borderStyle扩展名的支持。
• 已从borderStyle扩展插件中删除边框偏移。
• 删除了对部分使用列表视图扩展的支持。
• 删除了对在效果扩展中部分使用面板slide-0和面板slide-100效果的支持。
• 从效果扩展中删除了菜单淡入淡出、菜单缩放、面板缩放、面板向上滑动和面板向右滑动的效果。
• 已从效果扩展中删除所有列表项效果。
• 从分隔器附加组件中删除了灯选项。
• 删除了对为导航栏.title选项指定函数的支持。

第8.2.3版（2019-08-12）

• 错误修复垂直子菜单

v8.2.2（2019年7月19日）

• 已更新

第8.2.1版（2019-07-13）

• 已更新

第8.1.1版（2019-06-04）

• 将克隆配置选项移动到offCanvas附加组件。
• searchfield插件中的错误修复。
• 使导航条的内容和类型可在导航条附加组件中扩展。

版本8.0.8（2019-05-25）

• 错误修复计数器加载项

版本8.0.7（2019-05-22）

• 错误修复垂直子菜单

版本8.0.6（2019-05-05）

• wordpress包装错误修复

版本8.0.5（2019-05-02）

• 自定义生成错误修复

版本8.0.4（2019年4月19日）

• 克隆错误修复

版本8.0.3（2019-04-16）

• 错误修复

第7.3.3版（2019-03-14）

• 小错误修复

第7.3.2版（2019-02-21）

• 错误修复

v7.3.1（2019年2月19日）

• 错误修复

7.3版（2019-02-14）

• 使现代化

第7.2.3版（2019-02-03）

• 添加了颜色的CSS变量。
• 增加了上/右/下/左偏移量的SCSS和CSS变量。
• 将阴影菜单添加到阴影扩展中。
• 错误修复程序

第7.2.2版（2018-11-09）

• 错误修复

v7.2.0（2018年9月23日）

• 添加了颜色的CSS变量。
• 增加了上/右/下/左偏移量的SCSS和CSS变量。
• 将阴影菜单添加到阴影扩展中。
• 错误修复程序

v7.1.0（2018年9月14日）

• 将RTL支持从单独的加载项移动到核心、扩展和加载项文件中。
• 已删除RTL附加组件
• 添加了语言配置选项。
• 增加了俄语翻译。
• 更改了offCanvas附加组件的配置。
• 将一些带有CSS变量的SCSS变量替换为带有SCSS变量的CSS变量作为后备。
• SCSS变量的变化。
• 在下拉加载项中添加了fitViewport选项。
• 删除了一些核心的$mm_opt_SCSS变量。
• 更新了screenReader附加组件，将文本添加到页面阻止程序中。
• 改进了键盘导航插件。
• 错误修复。

v7.0.6（2018年07月06日）

• bootstrap 3包装修复程序

v7.0.5 (2018-06-15)

• 错误修复

版本7.0.4（2018-06-13）

• 拖动位置右固定

v7.0.3（2018年2月10日）

• 拖动位置右固定

v7.0.1（2018年01月06日）

• 错误修复列表视图扩展

v7.0.0（2018年01月06日）

• 添加了图标栏插件。
• 用侧边栏插件替换了图标栏和宽屏扩展。
• 为导航条插件添加了类似标签的样式。
• 使用新选项更新了iconPanels附加组件。
• 使用now选项更新了backButton附加组件。
• 使用新选项更新了searchfield插件。
• 删除了initPanels和initMenu选项，取而代之的是hooks选项。
• 为CSS框架实现了一个（某种）B.E.M.结构。
• 在分隔器插件中添加了类型选项。
• 改进的matchMedia可提供响应式扩展和选项。
• 完全从offCanvas附加组件中提取定位扩展插件。
• 选项navbar.title现在可以成为一个函数。
• 删除了分隔符。折叠选项有利于使用垂直子菜单。
• 删除了offCanvas.zposition:“next”选项。
• 将分隔符和分隔符css从列表视图扩展移到了核心。
• 按扩展名和插件拆分SCSS变量和mixin。
• 添加了SCSS变量以选择退出几乎所有的CSS。
• 风格更多地继承了网站风格。

预览截图

Slick和类似应用程序 滑动菜单插件 jQuery Mmenu