MaterializeCSS NavBar 和 SideNav答案

【问题标题】：MaterializeCSS NavBar and SideNavMaterializeCSS NavBar 和 SideNav
【发布时间】：2016-10-07 03:58:13
【问题描述】：

我正在创建一个类似 sb admin 2 的页面，其中有 2 个导航，如下所示：

到目前为止，我所做的是：

如您所见，侧边导航延伸至顶部栏。到目前为止我的代码是这样的：

<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>

  <body>

<div class="navbar-fixed">

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">User Profile</a></li>
  <li><a href="#!">Settings</a></li>
  <li class="divider"></li>
  <li><a href="#!">Logout</a></li>
</ul>
<nav class="light-blue lighten-1" role="navigation">
  <div class="nav-wrapper container">
    <a href="#!" class="brand-logo">Point of Sale</a>
    <ul class="right hide-on-med-and-down">
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>


</div>

<ul id="slide-out" class="side-nav fixed">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
</ul>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
    <script>
      (function($){
        $(function(){

          $('.button-collapse').sideNav();

        }); // end of document ready
      })(jQuery); // end of jQuery name space
    </script>
  </body>
</html>

我想要实现的是：

这可能吗？

【问题讨论】：

这也有助于stackoverflow.com/a/38125027/2130573

标签： css materialize

【解决方案1】：

As the Side Nav documentations says:

您必须将内容偏移侧边菜单的宽度。就这样吧

<style type="text/css">
.wrapper {
    padding-left: 300px;
}
</style>

并将您的代码包装在包装器 div 中

<div class="wrapper">

    <div class="">
        <!-- Dropdown Structure -->
        <ul id="dropdown1" class="dropdown-content">
            <li><a href="#!">User Profile</a></li>
            <li><a href="#!">Settings</a></li>
            <li class="divider"></li>
            <li><a href="#!">Logout</a></li>
        </ul>

        <nav class="light-blue lighten-1" role="navigation">
            <div class="nav-wrapper container">
                <a href="#!" class="brand-logo">Point of Sale</a>
                <ul class="right hide-on-med-and-down">
                    <!-- Dropdown Trigger -->
                    <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
                </ul>
            </div>
        </nav>
    </div>

</div>

<ul id="slide-out" class="side-nav fixed">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
</ul>

【讨论】：

@FewFlyBy 是的，您可以这样做，但您必须为该布局编写自定义 css... 1. 从包装标签中移出导航栏 2. 增加导航栏的 z-index 3. 并移动从顶部滑动导航作为导航栏高度希望这对您有所帮助..

【解决方案2】：

这是我的解决方法，以避免与顶部导航栏重叠，并隐藏在中小型屏幕上

添加：

<ul class="sidenav sidenav-fixed invesible-top" id="mobile-nav">

还可以选择让它在小屏幕上再次显示在顶部：

<li class="hide-on-large-only">

风格：

  @media only screen and (min-width : 992px) {
  .invesible-top {
    top: 65px;
  }
}

【讨论】：

我喜欢你的解决方案，但是覆盖一直持续到顶部。我在 CSS 中添加了 .sidenav-overlay {top: 65px} 来修复它，除非有 2 个 sidenav（一个作为主菜单的一部分，另一个作为过滤器菜单），那么两者都会受到影响。

【解决方案3】：

你应该试试：

<style type="text/css">
.side-nav{
    top: 65px;
    width: 250px;
}
</style>

并将您的代码包装在标题和旁边：

<header>
<div class="navbar-fixed">

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">User Profile</a></li>
  <li><a href="#!">Settings</a></li>
  <li class="divider"></li>
  <li><a href="#!">Logout</a></li>
</ul>
<div class="nav-wrapper">
<nav class="light-blue lighten-1" role="navigation">
  <div class="nav-wrapper container">
    <a href="#!" class="brand-logo">Point of Sale</a>
    <ul class="right hide-on-med-and-down">
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>
</div>
</div>
</header>

<aside>
<ul id="slide-out" class="side-nav fixed">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
</ul>
</aside>

【讨论】：

【解决方案4】：

有时我遇到了一些问题，当 Nav 溢出超出其包装器的宽度（在我的情况下是标题标签）时，我使用它而不是 MaterializeCSS 推荐的：

注意：不过在 sass 中。

header, main, footer {
    margin-left: 300px;

    nav {
        left: 300px;
        right: 0;
        width: auto;
    }

    @media only screen and (max-width : 992px) {
        margin-left: 0;

        nav {
            left: 0;
            right: 0;
            width: auto;
        }
    }
}

【讨论】：

【解决方案5】：

MaterializeCSS 推荐他自己的修改：

header, main, footer {
  padding-left: 300px;
}

@media only screen and (max-width : 992px) {
  header, main, footer {
    padding-left: 0;
  }
}

参考here。

【讨论】：

投反对票，因为参考链接转到 404 页面，这似乎与提出的问题无关。