简单实现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.

注意:在我的回答中,在桌面尺寸下查看时没有汉堡,即无法隐藏菜单.我发现如果我删除了hide-on-large-only以下属性,<a>那么它会在现有菜单的顶部放置一个菜单.

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