使用 mmenu 创建二级菜单答案

【问题标题】：create a secondary menu with mmenu使用 mmenu 创建二级菜单
【发布时间】：2016-01-20 13:20:38
【问题描述】：

这是我的问题：我的网站上有一个链接到主菜单的汉堡菜单图标。在 hambuger-menu 图标旁边有一个用户图标，我想将其链接到另一个菜单。该二级菜单的样式与主菜单相同，但内容不同（登录/登录表单）。有没有办法做到这一点？

非常感谢！

【问题讨论】：

如果您使用的是 mmenu，那么您所做的任何菜单都将具有与基本浅灰色菜单相同的样式，除非您使用的是主题扩展。你在使用菜单吗？

标签： jquery html mmenu

【解决方案1】：

我将假设您正在使用或想要使用 mmenu JS。先下载CSS和JS文件here。

在您的项目中包含 CSS 和 JS。

在您的下载文件夹中，转到 jQuery.mmenu-master\dist。 CSS 文件夹内是 jquery.mmenu.all 文件。将其添加到您的项目中。
JS文件夹里面是jquery.mmenu.all.min文件。将其添加到您的项目中。您可以通读站点教程并查看所有其他文件的用途，但这足以让您入门。

您还应该在项目中包含最新的JQuery 文件。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="CSS/jquery.mmenu.all.css" rel="stylesheet" />
    <script src="JS/jquery-1.11.3.min.js"></script>
    <script src="JS/jquery.mmenu.all.min.js"></script>    
</head>

在<body> 标签内创建另一个<div> 标签。
```
<body>
    <div>
    </div>
</body>
```

在<div> 中为您创建两个菜单。将菜单项放在列表中。

<a href="#menu1">Hamburger-icon</a>
<a href="#menu2">User-icon</a>

<nav id="menu1">
    <div>
        <ul>
            <li>item1</li>
            <li>item2</li>
        </ul>           
    </div>    
</nav>
<nav id="menu2">
    <div>
        <ul>
            <li>item1</li>
            <li>item2</li>
        </ul>
    </div>
</nav>

现在在正文中的最后一个 div 下方添加一个 <script> 标签。
```
<script type="text/javascript">
    $(document).ready(function () {
        $(document).ready(function () {
            $("#menu1").mmenu({
            });
            $("#menu2").mmenu({
            });
        });
    });
</script>
```
此代码将在页面外创建两个菜单。单击汉堡图标时，将打开菜单 1。单击用户图标时，将打开菜单 2。有关进一步的调整和自定义，请参阅 mmenu 教程。

【讨论】：