我正在尝试制作一个sidenav,当切换时,它不会完全隐藏sidenav并显示代表每个选项卡的图标。
我的代码在这里。
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>
问题:我希望sidenav像给定图像中的sidenav一样,这是一个sidenav并没有完全隐藏,并且将显示每个链接的图标表示。
可以在材料设计方面采用这种方法吗?
图片的完整链接...
https://almsaeedstudio.com/themes/AdminLTE/index2.html
最佳答案
是的,您只能在编辑CSS时执行此操作。这只是一个示例。看到此示例后,您将获得一个有关如何编辑CSS的想法。
Here is a sample.要查看,您需要单击“使用JS运行”按钮
关于html - Material 设计lite sidenav onhide仅显示图标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40977213/