Question

我正在尝试弄清楚如何在博客内容旁边显示导航菜单。

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

这是我到目前为止所做的，但它并不重要：

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

为了显示材料设计规则，您可以看到here

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

所以，我建议你使用阴影为你的盒子，边缘半径和类似的其他效果。我试图根据你的代码在材料风格中做一个简单的代码：

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

内容区域的材料设计sidenav

1 个答案: