html - materializeCSS中的响应式移动导航如何

Question

我一直在尝试寻找一种方法来使用媒体查询更改我的网络应用程序的 html 结构，以便我的导航在移动网站上折叠成一个下拉菜单。似乎更改实际标记的唯一方法是使用 jquery，但我想尽可能避免这种情况。

我已经查看了所有内容，但我在网上尝试过的所有建议只会导致比它解决问题更多的问题，因为我使用网站的物化 css 框架。希望这里有人曾经使用过 materialize 并且已经解决了这个问题。

这是 html:

<nav class="nav">
    <div class="nav-wrapper">
        <a href="#" class="brand-logo left">Game Swap</a>
        <ul id="nav-mobile" class="right">
            <li><a id="homeMenu" href="#">Home</a></li>
            <li><a id="searchMenu" href="#">Matches</a></li>
            <li><a id="profileMenu" href="#">Profile</a></li>
            <li><a id="loginMenu" href="#">Login</a></li>
            <li><a id="logoutMenu" href="#">Logout</a></li>
        </ul>
    </div>
</nav>

截至目前，导航在宽度达到 620 像素左右之前与所有分辨率一样工作得很好，然后导航项开始与 Logo 重叠。

Here's the materialize documentation如果有帮助。

提前感谢您的帮助。

更新:我已成功使用 materialize 将我的导航替换为汉堡导航。但是，在桌面上单击时，没有下拉菜单。我突然想到，也许这个汉堡包导航只是一个用于移动设备的按钮，用于从侧面动画到屏幕上的侧面导航。如果不是，那么代码还有其他问题。该文档声称有一个“下面的示例”，但我没有看到它。看这里:http://materializecss.com/navbar.html#mobile-collapse

我还在准备好文档的末尾初始化了 jquery 行，所以这不应该是问题所在。

更新的 HTML:

<nav class="nav">
    <div class="nav-wrapper">
        <a href="#" class="brand-logo left">Game Swap</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse right"><i class="material-icons">menu</i></a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a id="homeMenu" href="#">Home</a></li>
            <li><a id="searchMenu" href="#">Matches</a></li>
            <li><a id="profileMenu" href="#">Profile</a></li>
            <li><a id="loginMenu" href="#">Login</a></li>
            <li><a id="logoutMenu" href="#">Logout</a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo">
            <li><a id="homeMenu" href="#">Home</a></li>
            <li><a id="searchMenu" href="#">Matches</a></li>
            <li><a id="profileMenu" href="#">Profile</a></li>
            <li><a id="loginMenu" href="#">Login</a></li>
            <li><a id="logoutMenu" href="#">Logout</a></li>
        </ul>
    </div>
</nav>

更新 2:我决定使用一个完全不同的组件，使整个内容成为一个下拉列表。对于有相同问题的任何人，请参阅下面的解决方案。

<ul id="dropdown1" class="dropdown-content">
  <li><a id="homeMenu" href="#">Home</a></li>
  <li><a id="searchMenu" href="#">Matches</a></li>
  <li><a id="profileMenu" href="#">Profile</a></li>
  <li><a id="loginMenu" href="#">Login</a></li>
  <li><a id="logoutMenu" href="#">Logout</a></li>
</ul>
<nav class="nav">
    <div class="nav-wrapper">
        <a href="#" class="brand-logo left">Game Swap</a>
        <ul class="right">
            <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Menu<i class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
    </div>
</nav>

Answer 1

是的，它适用于移动设备，并隐藏在桌面 View 中，但您可以显示它，但将 View 更改为从无阻止，检查以下代码:

@media only screen and (min-width: 993px){
nav a.button-collapse {
    display: block;
}
}

原本.button-collapse on(min-width: 993px)的显示是none；

检查我创建的代码笔，它工作正常。

http://codepen.io/adrianrios/pen/xgWWRO