內容區域的材料設計sidenav

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

• 創建一種視覺語言，將優秀設計的經典原則與技術和科學的創新和可能性相結合。
爲此，您可以使用文字，邊框或其他必須選擇您的方式。
• 開發一個單一的底層系統，允許跨平臺和設備規模的統一體驗。移動戒律是根本，但觸摸，語音，鼠標和鍵盤都是一流的輸入方法。
對於屏幕閱讀器，您可以使用媒體查詢，flexbox，語義標籤，如'，'等，還可以使用'attr abbr`。

所以，我建議你使用陰影爲你的盒子，邊界半徑和其他類似的效果。 我試着根據你的代碼風格的材料做一個簡單的代碼：

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