Memasang Simple Flat Sidebar

Simple Flat Sidebar yang saya share kali ini tampilannya cukup simple tapi tetap menarik untuk dijadikan pilihan ketika sobat melakukan modifikasi template . Sesuai namanya Simple Flat Sidebar berarti keberadaannya tepat disamping area postingan dan menu ini akan muncul ketika kita melakukan hover  . Silahkan lihat demonya ! 

Demosion

Langkah Kustomisasi 

Masukan kode CSS sebelum kode  </style>

/* Navigation */
nav{
  width: 300px;
  height: 100%;
  background: #333;
  position: fixed;
  top: 0; left: -236px;
  z-index: 2;
  transition: left .7s;
  -webkit-transition: left .7s;
}
nav:hover{
  left: 0;
}
nav:hover ~ #content{
  opacity: .3;
}
nav a, nav a:hover{
  text-decoration: none;
}
/* Navigation  -- Icon */
nav .icon{
  width: 32px;
  height: 32px;
  float: right;
  margin: 20px 16px 0 0;
  font-size: 36px;
  text-align: center;
  line-height: 32px;
  color: white;
  transition: opacity .7s;
  -webkit-transition: opacity .7s;
}
nav:hover .icon{
  opacity: 0;
}
/* Navigation -- Header */
nav header{
  margin: 40px 20px 30px;
}
nav header a{
  font-size: 2.7em;
  font-weight: 300;
  text-transform: uppercase;
  color: rgba(240,240,240,.7);
}
nav header a:hover{
  color: #eee;
}

/* Navigation -- Links */
nav ul{
  padding-left: 0;
  list-style: none;
}
nav li a{
  display: block;
  border-left: 3px solid transparent;
  padding: 16px 20px;
  font-weight: 600;
      color: rgba(200,200,200,.5);
}
nav li a:hover{
  background: rgba(0,0,0,.1);
  border-color: #1b9;
  color: #eee;
}
nav li a:before{
  content: '';
  width: 0;
  height: 0;
  display: inline-block;
  margin: 3px 0 0 -20px;
  border: 8px solid transparent;
}
nav li a:hover:before{
  border-left-color: #1b9;
}

Masukan Kode HTML sesuai struktur template .

<nav>
<div class="icon fi-list"></div>
<header><a href="#">Header</a></header>
<ul>
<li><a href="#">Hiji</a></li>
<li><a href="#">Dua</a></li>
<li><a href="#">Tilu</a></li>
<li><a href="#">Opat</a></li>
<li><a href="#">Lima</a></li>
<li><a href="#">Sixth</a></li>
<li><a href="#">Seventh</a></li>
</ul>
</nav>

Sampai langkah ini sobat sudah berhasil memasangnya , selebihnya silahkan kreasikan sesuai kebutuhan.!