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。

注意：在我的回答中，在桌面尺寸下观看时没有汉堡，即无法隐藏菜单。我发现如果我删除了以下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解决方案来说足够快乐。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

简单实现UI响应侧菜单

1 个答案: