materializeCSS中的响应式移动导航如何答案

【问题标题】：responsive mobile nav in materializeCSS how tomaterializeCSS中的响应式移动导航如何
【发布时间】：2017-03-20 07:47:47
【问题描述】：

我一直在尝试找出一种方法来使用媒体查询更改我的网络应用程序的 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>

到目前为止，导航和所有 res 都可以正常工作，直到您达到大约 620 像素宽，然后导航项开始与徽标重叠。

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

提前感谢您的帮助。

更新：我已成功使用物化将我的导航替换为汉堡导航。但是，在桌面上单击时，没有下拉菜单。我突然想到，也许这个汉堡导航只是一个用于侧面导航的移动按钮，可以从侧面动画到屏幕上。如果不是，那么代码还有其他问题。该文档声称有一个“下面的示例”，但我没有看到它。见这里：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>

【问题讨论】：

你初始化移动导航栏，jquery端了吗？它必须工作：$(".button-collapse").sideNav();。另外，我没有看到同样需要的“折叠”按钮。
我认为你应该在移动设备上使用 sidenav
@ToX 和 l2aelba，我可以在移动设备上使用 sidenav 而不在桌面上使用它吗？ Bc 媒体查询不会/不能更改标记。
即使使用顶部导航栏，您也需要触发折叠的东西，请参阅此处的文档：materializecss.com/navbar.html#mobile-collapse
@ToX 82 我做了更新。你能看一下吗？

标签： html css materialize

【解决方案1】：

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

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

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

检查我创建的codepen，它工作正常。

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

【讨论】：