シンプルマテリアライズUI応答サイドメニュー

Question

： -

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

たとえば、デスクトップ上には、（次のようになりsouldバーガーアイコンから/非表示]メニューを表示する機能）で： -

しかし、携帯電話では、次のようになります -

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>

、それは完全に消失し、メニューの外をクリック！ :-)

理想的には、デスクトップサイズのハンバーガーを用意して、必要に応じてメニューを隠すことができれば理想的ですが、この解決策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>