簡單Materialise的UI響應側面菜單

Question

我已經搜查高和低的Materialise的UI相當於這個的（例如，在重量更輕MUI CSS）： -

https://www.muicss.com/docs/v1/example-layouts/responsive-side-menu 

例如在桌面上，要高度重視這個樣子（通過漢堡圖標顯示/隱藏菜單能力）： -

但在移動應該是這樣的： -

Answer 1

我一直在這裏，並使用文檔（http://materializecss.com/side-nav.html）想出了一些東西。

如果任何人有興趣，我已經附加了HTML，CSS + JavaScript。

注意：在我的回答中，在桌面尺寸下查看時沒有漢堡，即無法隱藏菜單。我發現，如果我刪除了以下<a>上的hide-on-large-only屬性，那麼它將在當前菜單的頂部放置一個菜單。

<a href="#" data-activates="slide-out" class="button-collapse hide-on-large-only"><i class="material-icons">menu</i></a>

此外，菜單點擊出來的時候就完全消失了！ :-)

理想情況下，在桌面尺寸中放入漢堡會很好，所以如果需要的話，菜單可以是hidnen，但對於此解決方案TBH來說足夠快樂。

$('.button-collapse').sideNav({ 
 
    menuWidth: 300, // Default is 300 
 
    edge: 'left', // Choose the horizontal origin 
 
    closeOnClick: false, // Closes side-nav on <a> clicks, useful for Angular/Meteor 
 
    draggable: true // Choose whether you can drag to open on touch screens 
 
});

#container { 
 
    padding-left: 300px; 
 
} 
 

 
#content { 
 
    padding: 20px; 
 
} 
 

 
@media only screen and (max-width : 992px) { 
 
    #container { 
 
    padding-left: 0px; 
 
    } 
 
}

<!-- JQuery/Materialize CSS + JavaScript imports --> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" /> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 
 

 
<!-- HTML --> 
 

 
<div id="container"> 
 

 
    <div id="menu"> 
 

 
    <ul id="slide-out" class="side-nav fixed show-on-large-only"> 
 
     <li><a href="#!">First Sidebar Link</a></li> 
 
     <li><a href="#!">Second Sidebar Link</a></li> 
 
     <li class="no-padding"> 
 
     <ul class="collapsible collapsible-accordion"> 
 
      <li> 
 
      <a class="collapsible-header">Dropdown<i class="material-icons">arrow_drop_down</i></a> 
 
      <div class="collapsible-body"> 
 
       <ul> 
 
       <li><a href="#!">First</a></li> 
 
       <li><a href="#!">Second</a></li> 
 
       <li><a href="#!">Third</a></li> 
 
       <li><a href="#!">Fourth</a></li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <div id="content"> 
 
    <a href="#" data-activates="slide-out" class="button-collapse hide-on-large-only"><i class="material-icons">menu</i></a> 
 
    
 
    <h3>Simple Materialize Responsive Side Menu</h3> 
 
    
 
    <p>Resize browser to see what it looks like in (a) brwoser (b) mobile devices</p> 
 

 
    </div> 
 
    
 
</div>