Question

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

我已经看了一遍，但我在网上尝试的所有建议只会导致更多的问题，而不是解决bc我使用网站的物化css框架。希望有人在此之前已经实现了物化，并且已经解决了问题。

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

截至目前，导航工作效果非常好，直到你达到大约620px宽，然后导航项目开始重叠徽标。

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

提前感谢您的帮助。

更新：我已经成功使用物化来用汉堡包导航替换我的导航。但是，单击桌面时，没有下拉列表。在我看来，这个汉堡包导航器可能只是一个用于侧面导航的移动按钮，可以从侧面动画到屏幕上。如果没有，那么代码还有其他一些错误。该文档声称下面有一个＆＃34;示例＆＃34;但我没有看到它。见这里：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

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

@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

在物化中的响应式移动导航CSS如何

1 个答案: