mmenu light无法隐藏#menu且未移入隐藏滑入元素问题求助

按照mmenu light教程接入简单网站后，移动端菜单已成功生成，但页面上的#menu元素依然可见，没有被移到正确的隐藏滑入容器位置，请问遗漏了什么配置？

代码示例 #

<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>

解决方法 #

• 确认CSS文件加载状态：检查mmenu-light.css的文件路径是否正确，确保该文件已成功加载。mmenu light依赖自带CSS来在匹配媒体查询时隐藏原#menu元素，若CSS未加载，原菜单会始终显示。
• 验证媒体查询条件：你设置的触发条件是(max-width: 600px)，确认测试设备的屏幕宽度确实小于等于600px，否则mmenu light不会触发移动端菜单的DOM迁移逻辑。
• 添加兜底CSS规则：如果上述两步都没问题，可手动添加CSS规则强制隐藏移动端的原菜单：

@media (max-width: 600px) {
  #menu {
    display: none !important;
  }
}

内容的提问来源于stack exchange，提问作者Waldgeist