html - Material Design lite sidenav onhide 仅显示图标

Question

我正在尝试制作一个侧导航，当切换时，它不会完全隐藏侧导航，而是会显示代表每个选项卡的图标。

我的代码在这里..

header .mdl-layout__drawer {
  border-right: 0;
}
header .mdl-layout__drawer .mdl-layout-title {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
header .search input {
  border-bottom: 0;
}
header .search label {
  color: rgba(255, 255, 255, 0.6);
}
header .user_img {
  border-radius: 24px;
  width: 40px;
}

.sidenav {
  background-color: #fff;
  border-right: 0;
}
.sidenav .mdl-layout-title {
  box-shadow: rgba(0, 0, 0, 0.13725) 0px 2px 2px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.11765) 0px 1px 5px 0px;
}
.sidenav .mdl-navigation__link.active {
  color: #2196F3;
}
.sidenav .mdl-navigation__link span {
  padding-left: 16px;
}

.mdl-layout__content {
  background-color: #e0e0e0;
}

.account_action .inner {
  background-color: #fff;
  font-size: 20px;
}
.account_action .inner .material-icon {
  color: #2196F3;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.css" rel="stylesheet"/>
<link href="https://code.getmdl.io/1.2.1/material.blue-light_blue.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer mdl-layout--fixed-header has-drawer">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">
        <div class="mdl-textfield mdl-js-textfield search">
        <input class="mdl-textfield__input" type="text" id="search">
        <label class="mdl-textfield__label" for="search">Search</label>
      </div>
      </span>
      <div class="mdl-layout-spacer"></div>
      <!-- Right aligned menu below button -->
      <button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">arrow_drop_down</i>
      </button>

      <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right">
        <li class="mdl-menu__item">Some Action</li>
        <li class="mdl-menu__item">Another Action</li>
        <li disabled class="mdl-menu__item">Disabled Action</li>
        <li class="mdl-menu__item">Yet Another Action</li>
      </ul>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/326334/profile/profile-80_2.jpg" alt="user_image" class="user_img"/>
    </div>
  </header>
  <div class="mdl-layout__drawer sidenav">
    <span class="mdl-layout-title mdl-color--blue-500 mdl-color-text--blue-grey-50">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href=""><i class="material-icons">dashboard</i><span>DASHBOARD</span></a>
      <a class="mdl-navigation__link" href=""><i class="material-icons">description</i><span>FORMS</span></a>
      <a class="mdl-navigation__link active" href=""><i class="material-icons">account_box</i><span>MY ACCOUNT</span></a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content">
      <div class="mdl-grid account_action">
        <div class="mdl-cell mdl-cell--4-col"><div class="inner"><i class="material-icons">person_add</i></div></div>
        <div class="mdl-cell mdl-cell--4-col"><div class="inner"><i class="material-icons">group_add</i></div></div>
        <div class="mdl-cell mdl-cell--4-col"><div class="inner"><i class="material-icons">color_lens</i></div></div>
      </div>
    </div>
  </main>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.js"></script>

问题:我希望侧导航像给定图像中的侧导航一样，这是一个未完全隐藏的侧导航，并将显示每个链接的图标表示。

是否可以在 Material 设计方面实现这种方法？

图像的完整链接... https://almsaeedstudio.com/themes/AdminLTE/index2.html

Answer 1

是的，您只能通过编辑 CSS 来完成此操作。这只是一个示例。看到此示例后，您可以了解如何编辑 CSS。 Here is a sample.要查看，您需要单击“使用 JS 运行”按钮