Memasang Simple Flat Sidebar
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.!