Simple Materialise UI 响应式侧边菜单

Question

我在上下搜索了与此等效的 Materialize 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>

此外，当点击菜单外时，它完全消失了！ :-)

理想情况下，将汉堡放在桌面大小会很好，这样菜单可以在必要时隐藏，但对这个解决方案已经足够满意了。

$('.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>

Simple Materialise UI 响应式侧边菜单

Simple Materialize UI Responsive Side Menu

materialize

responsive-design

hamburger-menu