Membuat Menu Navigation Sidebar

Kopiku kental musiku keras akan menemani tutorial kita kali ini dalam Membuat Menu Navigation Sidebar . Artinya navigasi akan diletakan di posisi sidebar untuk sebelah kiri , dengan memanfaatkan position: fixed supaya menu nempel terus saat terjadi scroll . 

SEE DEMO 

Komposisi kode yang digunakan sangat sederhana 

CSS

#nav {
  width: 300px;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: #34495e;
  transform: translate3d(0,0,0);
  transition: 500ms transform ease-in-out;
}
#nav ul{
  margin: 0px;
  padding: 0px;
  list-style: none;
}
#nav li {
  color: white;
  line-height: 2em;
  position: relative;
}
#nav li a {
  color: white;
  display: block;
  position: relative;
  text-decoration: none;
  padding: 10px;
  font-weight: 300;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-top: 1px solid #406081;
  border-bottom: 1px solid #2c3e50;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
#nav li a:hover {
  background: #3d566e;
}

HTML

<nav id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Back To Articles</a></li>
  </ul>
</nav>

Nah seperti itulah adanya , mudah-mudahan sobat bisa lebih memahami dan lebih inovasi dengannya.