materializecss 移动导航栏被禁用答案

【问题标题】：materializecss mobile navbar is disabledmaterializecss 移动导航栏被禁用
【发布时间】：2017-05-06 16:44:41
【问题描述】：

我正在为我的网页使用 MaterializeCSS 的导航栏。添加导航元素并切换到响应模式后，我可以找到折叠按钮出现。单击它时，我会看到带有链接的侧导航。但是按钮被禁用（侧面导航顶部似乎有一个覆盖）。单击任何链接时，侧导航消失。

这是我的导航栏代码：

<div class="navbar-fixed scrollspy" id="main">
        <nav>
            <div class="container nav-wrapper">
                <a href="#!" class="brand-logo center">SRS Constructions</a>
                <a href="#" data-activates="mobile-menu" class="button-collapse"><i class="fa fa-bars"></i></a>
                <ul class="left hide-on-med-and-down">
                    <li class="active"><a href="#main">Home <span class="sr-only">(current)</span></a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                </ul>
                <ul class="right hide-on-med-and-down">
                    <li><a href="#">Our Projects</a></li>
                    <li><a href="#">Why Us</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <ul class="side-nav" id="mobile-menu">
                    <li><a href="#main">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#">Our Projects</a></li>
                    <li><a href="#">Why Us</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </nav>
 </div>

这是我点击 3 条时的样子：

我已将整页上传到 Github here。

【问题讨论】：

标签： html css twitter-bootstrap materialize

【解决方案1】：

尝试将您的#mobile-menu 放在导航栏 div 之外。

【讨论】：

问题出现是因为官方的 Materialize 文档显示移动菜单可以在导航栏 div 内。这令人困惑。

【解决方案2】：

解决方案：将sidenav移到.navbar-fixed之外

<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper"> <a href="#!" class="brand-logo">Logo</a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
        </div>
    </nav>
</div>

<ul class="side-nav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
</ul>

【讨论】：