Material 在内容区设计sidenav

Question

我正在尝试弄清楚如何在我的博客内容旁边获得一个导航菜单。

我不想要导航菜单header - 使菜单滑出的按钮。我希望菜单显示在卡片中。

这是我目前所拥有的，但不是 material:

HTML

<ul class="card_nav">
          <li> <a>test</a></li>
        </ul>

CSS

.card_nav {
  list-style: none;
    width: auto;
    height: auto;
    margin: 8px auto;
    border-radius: 0;
    background-color: #FFF;
    /*box-shadow: 0px 20px 70px 0px rgba(0, 0, 0, 0.21);*/
    position: relative;
    overflow: hidden;
}

Answer 1

显示material设计规则可以看here

创建一种视觉语言，将class优秀设计的经典原则与技术和科学的创新与可能性相结合。
开发一个单一的底层系统，允许跨平台和设备尺寸的统一体验。移动规则是基本的，但触摸、语音、鼠标和键盘都是第一-class 输入法。

所以，我建议你为你的盒子使用阴影，边框半径和其他类似的效果。我尝试根据您的代码以 material 风格编写一个简单的代码：

.card_nav {
  list-style: none;
    width: 100px;
    height: 400px;
    margin: 8px auto;
    border-radius: 0;
    background-color: #FFF;
    /*box-shadow: 0px 20px 70px 0px rgba(0, 0, 0, 0.21);*/
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 1px 1px  3px 2px #eee;
    -moz-box-shadow:1px 1px 3px 2px #eee ;
    box-shadow: 1px 1px 3px 2px #eee;
    padding: 10px 20px;
}
ul.card_nav li a {
  text-transform: uppercase;
  text-align: center;
}
ul.card_nav li a:hover {
  border-bottom: 2px solid #ff0000;
}

<ul class="card_nav">
          <li> <a>test</a></li>
        </ul>

Material 在内容区设计sidenav

Material design sidenav in content area

html

css

material-design-lite