Material design sidenav in content area - html

Question

I am trying to work out how I get a navigation menu next to my blog content.
I don't want the navigation menu header - the button that makes the menu slide out. I want the menu to show inside a card.
Here is what I have so far, but it is not 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

For show the rules of material design you can see here
Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.
For this you can use text, border or other way that must choose you.
Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.
For you can use media queries, flexbox, semantic tag like `, , ` etc. and also `attr abbr` for screen reader.
So, I advice you of use shadow for your box, border-radius and other effects similar.
I've tried to do an easy code in material style based on your code:
.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>