MaterializeCSS的NavBar和SideNav

我創建一個SB管理員2頁一樣的地方有2個導航，看起來像這樣：MaterializeCSS的NavBar和SideNav

什麼我迄今所做的是：

正如您所看到的，側面導航擴展在頂部欄。到目前爲止我的代碼是這樣的：

<!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>

我想實現的是：

這可能嗎？

來源

2016-10-07 FewFlyBy

這也有幫助https://stackoverflow.com/a/38125027/2130573 –

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>

來源

2016-10-07 05:11:52 Anish

嗨，謝謝。介意看我的更新後的帖子？ – FewFlyBy

@FewFlyBy是的，你可以做，但你必須爲該佈局編寫自定義CSS ... 1.從包裝標記中移出導航欄 2.增加導航欄的z-index 3.並從頂部移動滑動導航欄作爲導航欄高度希望這可以幫助你.. – Anish

你應該嘗試：

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

來源

2017-08-08 00:22:31

MaterialiseCSS re他自己修改爲：

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

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

參考here。

來源

2017-11-07 21:47:55

MaterializeCSS的NavBar和SideNav

回答

相關問題