本教程将带您快速浏览jQuery.jQuery插件jQuery.mmenu ，它有助于创建广泛的网站导航。 在检查时，我们将看到如何使用此插件从头开始构建画布菜单 。
什么是jQuery.mmenu？
有关jQuery.mmenu的最佳说明，我们将转到其Github页面 ：
“适用于应用程序的最佳jQuery插件，类似于您的网站和webapp的上下菜单，带有滑动子菜单。
jQuery.mmenu插件是高度可定制的，并带有许多附加组件 （例如，计数器和分隔线）以及扩展名 （例如，效果和页面阴影）。 对于那些喜欢的人，它可以作为Wordpress插件使用，并且可以在各种浏览器中很好地工作！
jQuery.mmenu入门
首先，您必须获取库的副本。 这可以通过访问其官方页面 ，通过程序包管理器（例如Bower ）或CDN（例如cdnjs ）来完成 。
下载后，您必须在页面中包含必要CSS和JS文件。
请注意，根据您要构建的菜单，可能需要其他资产。 例如，画布菜单需要jquery.mmenu.css （或其缩小版本）和jquery.mmenu.js （或其缩小版本）文件。 如果您想修改菜单的默认行为（例如，将其位置移至右侧），则还必须包括与“画布”附加组件相关的文件。 如果这看起来令人困惑，并且您不想担心需要哪些文件，请继续使用“所有”文件（即jquery.mmenu.all.css和jquery.mmenu.min.all.js ）项目。
在我们的演示中，我们将通过CDN导入“所有”文件。 我们页面的head元素将引用“所有” CSS文件：
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/css/jquery.mmenu.all.min.css'> 以同样的方式，我们将“ all”脚本（和jQuery的副本）放在结束的<body>标记之前：
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/js/jquery.mmenu.min.all.min.js'></script>因此，让我们开始构建菜单！
设置HTML
让我们首先了解页面的结构。 以下是相应HTML代码：
<div>
<header><!-- more content here --></header>
<main><!-- more content here --></main>
</div>
<nav id="menu"><!-- more content here --></nav> 注意，我们将除nav元素之外的所有元素都放置在一个包含div 。
我们可以使用一个不同的元素作为容器，但是这样做我们必须通过相关的配置属性（即offCanvas.pageNodetype属性）将这一更改通知插件。 另外，如果可能，我们应该避免为包装元素声明许多CSS属性。 更具体地说，该插件建议以下内容：
“最好不要在没有（最小/最大）宽度和高度，填充，边框和边距的情况下使用此DIV。”
标记
下一步是仔细查看菜单的结构。 相关HTML代码如下所示：
<nav id="menu">
<ul>
<li>
<a href="#">About</a>
<ul>
<li>
<a href="#">History<span>Click me</span></a>
</li>
<li>
<a href="#">Vision</a>
</li>
<li>
<a href="#">Team</a>
</li>
</ul>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Clients</a>
</li>
<!-- more list items here -->
</ul>
</nav>在这里，我们使用了一些简单HTML代码来构建菜单。 无序列表，带有嵌套列表和链接。 该插件不需要特定的标记； 幸运的是，我们能够使用所需的任何标记。
我们为菜单分配一个唯一的标识符，稍后将使用它来实例化插件。 最后但并非最不重要的一点是，我们将其隐藏，直到成功应用所有样式。 这一步很重要，因为通过添加以下CSS代码，我们可以防止FOUC震颤 ：
nav {
display: none;
}现在我们已经准备好页面，是时候初始化菜单了！
触发插件
在展示如何触发插件之前，让我们首先缓存一些选择器 ：
var $menu = $('#menu');
var $btnMenu = $('.btn-menu');
var $img = $('img');现在，我们使用以下代码对其进行初始化：
$menu.mmenu({ // configuration settings here }); 我们可以通过CSS和可用的配置设置来自定义默认外观和菜单功能。 我们稍后将看到一些示例。
此外，我们可以选择自动或手动打开和关闭菜单。 在本例中，当单击具有btn -menu类的元素时，将显示菜单。 为了实现此功能，我们将利用可用的API 。 这是必需的代码：
var api = $menu.data("mmenu");
$btnMenu.click(function() {
api.open();
}); 相反，我们将选择自动隐藏菜单。 这是默认行为。 当我们单击页面的任何部分（属于菜单的部分）时触发。
在继续之前，我还要提到一件事。 如果我们尝试通过单击目标菜单项（ a元素）来打开子菜单，则该项将无法完全单击。 具体来说，只有在我们单击该菜单项的右侧时，子菜单才会打开（请参见实时示例以了解此行为）。 为了使整个菜单项都可单击，我们必须添加以下代码行：
$menu.find( ".mm-next" ).addClass("mm-fullsubopen");更改画布外图像
在本部分中，目标是根据菜单的状态显示不同的导航图标。 下面的屏幕快照显示了我们想要实现的目标：
为此，我们将处理opening和closing事件。 您可以在与“ offCanvas”附加组件有关的页面中找到这些事件的文档。 这是我们用来更改图标的代码段：
api.bind('opening', function() {
$img.attr('src', 'arrows_remove.svg');
});
api.bind('closing', function() {
$img.attr('src', 'arrows_hamburger.svg');
}); 除了上述事件之外，还有一些其他的事件（例如， opened和closed事件）可用于您自己的项目。
更改默认宽度
为了更改菜单的预定义宽度，我们可以使用CSS或Sass（通过修改源文件）。 默认情况下，其min-width和max-width属性值分别等于140px和440px 。 在我们的演示中，让我们看看如何通过CSS更改初始max-width属性值。 以下是需要覆盖CSS规则：
.mm-menu {
max-width: 350px;
}
/**
* add more vendor prefixes
* depending on the browsers you're targeting
*/
@media all and (min-width: 550px) {
html.mm-opening .mm-slideout {
transform: translate(350px, 0);
}
}
/**
* override this rule
* in case you're building a right menu
*/
@media all and (min-width: 550px) {
html.mm-right.mm-opening .mm-slideout {
transform: translate(-350px, 0);
}
}其他CSS变更
此时，我们将继续自定义菜单的外观。 同样，我们将编辑Sass源文件以根据需要修改样式。 看一下我们将在下面覆盖的规则（为简单起见，我省略了Sass变量的值）：
.mm-menu {
background: darken($main-color, 10%);
}
.mm-listview > li > a {
color: $text-color;
padding: 20px;
}
.mm-listview > li > a:hover,
.mm-listview .mm-next.mm-fullsubopen:hover + a {
color: $highlight-color;
}
.mm-listview > li > a:hover span {
color: $text-color;
}
.mm-menu .mm-listview > li.mm-selected > a:not(.mm-next) {
background: transparent url(arrows_check.svg) no-repeat center right 10px;
background-size: 30px 30px;
text-decoration: line-through;
} 现在考虑最后一条规则。 每次单击菜单项时，它都会收到mm-selected类，因此我们可以使用该选择器来设置样式。 但是，我们只想在选择过程中为最后一项设置样式，因此，我们将指向没有mm-next类的mm-next 。
添加扩展和附加组件
在上一节中，我们看到了如何初始化插件。 现在，让我们通过覆盖默认配置选项来扩展其行为和功能。
首先，我们更改显示在主面板上方的标题。
接下来，我们包括“计数器”和“画布”附加组件。 最后一个附加组件使我们可以更改菜单相对于页面的位置。
最后，我们添加三个扩展。 查看下面的最终初始化代码：
$menu.mmenu({
counters: true,
navbar: {
title: "Menu Content"
},
extensions: ["pageshadow", "effect-zoom-menu", "effect-zoom-panels"],
offCanvas: {
position : "right",
zposition : "back"
}
});结论
在本教程中，我们完成了使用jQuery.mmenu插件创建画布菜单的过程。 下一步，请深入研究CodePen上的演示的完整资源 。 然后，我建议您进入jQuery.mmenu的官方页面，并查看可用的各种交互式示例。 在评论中向我们展示您的示例！
如果您正在寻找一种快速的解决方案，请不要忘记Envato Market包含一系列不同的CSS或JavaScript菜单以及导航小部件 。 这是想法和示例的良好起点。