mmenu 灯不会隐藏#menu,也不会将菜单移动到隐藏的滑入元素(存在)

问题描述 投票:0回答:1

我只是尝试将 mmenu light 添加到一个简单的默认网站(如示例中https://mmenujs.com/mmenu-light/tutorial.html)。正在生成移动菜单,但菜单本身仍然可见,并且没有移动到正确的位置(抱歉 - 我不知道如何以更好的方式描述它)。

我错过了什么?感谢您的帮助!

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
    <title>My webpage</title>
    <link href="mmenu-light.css" rel="stylesheet" />
</head>
<body>
<div id="page">
    <div id="header">
        <a href="#menu">Open the menu</a>
        <nav id="menu">
            <ul>
                <li class="Selected"><a href="/">Home</a></li>
                <li><span>About us</span>
                    <ul>
                        <li><a href="/about/history/">History</a></li>
                        <li><a href="/about/team/">The team</a></li>
                        <li><a href="/about/address/">Our address</a></li>
                    </ul>
                </li>
                <li><a href="/contact/">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div id="content">
        <h1>The title</h1>
        <p>Some content.</p>
    </div>
</div>

<script src="mmenu-light.js"></script>
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            const menu = new MmenuLight(
                document.querySelector( "#menu" ),
                "(max-width: 600px)"
            );

            const navigator = menu.navigation();
            const drawer = menu.offcanvas();

            document.querySelector( "a[href='#menu']" )
                .addEventListener( "click", ( evnt ) => {
                    evnt.preventDefault();
                    drawer.open();
                });
        }
    );
</script>
</body>
</html>```
mmenu
1个回答
0
投票

我在github上的demo中找到了解决方案: https://github.com/FrDH/mmenu-light/tree/master/demo

使用 github 上的演示即可。 使用教程中的演示则不然。

我认为这与以下因素有关:

            "DOMContentLoaded", () => {```
© www.soinside.com 2019 - 2024. All rights reserved.