Question

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

非常感谢！

Answer 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教程。

使用mmenu创建二级菜单

1 个答案: