Membuat Menu Navigation Sidebar
Komposisi kode yang digunakan sangat sederhana
#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.