我只是尝试将 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>```
我在github上的demo中找到了解决方案: https://github.com/FrDH/mmenu-light/tree/master/demo
使用 github 上的演示即可。 使用教程中的演示则不然。
我认为这与以下因素有关:
"DOMContentLoaded", () => {```