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