Material css sidebar

<nav> <!-- navbar content here  --> </nav>

  <ul id="slide-out" class="sidenav">
    <li><div class="user-view">
      <div class="background">
        <img src="images/office.jpg">
      </div>
      <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
      <a href="#name"><span class="white-text name">John Doe</span></a>
      <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
    </div></li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Subheader</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
  </ul>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

Source: materializecss.com

Similar codes

3 votes285 views3 answers
Can you control another div on hover css
CSS
10 votes301 views2 answers
Import css in another css file
CSS
39 votes311 views6 answers
Css first child
CSS
2 votes276 views1 answer
Why do we need hexadecimal number system
CSS
46 votes272 views6 answers
Css background color
CSS
0 vote296 views1 answer
Css chess pieces
CSS
12 votes289 views4 answers
On hover display another div css
CSS
7 votes286 views2 answers
Use text-align to justify the paragraph style
CSS
50 votes278 views4 answers
Label css
CSS
73 votes300 views5 answers
Border-radius
CSS