Slideout Navigation atau Push Menu atau Vertical Slide Menu sebenarnya sama saja yaitu membuat menu yang pada umumnya tampil dari sebelah kiri atau kanan layout dengan menu berjejer kebawah atau vertical dan pada kesempatan yang lalu saya sempat membahas artikel tentang cara Membuat Sildeout Navigation dengan menggunakan j-query , tapi kali ini kita akan membuatnya lebih sederhana dengan memanfaatkan onclick event dan Cubic-bezier transition . untuk lebih memahami silahkan lihat demonya


Berikut kode dan kostumisasi lengkapnya

Kode CSS
body {
  margin:0;
  padding:0;
  background-color:#1b1b1b;
}
.content-wrapper {
  background-color:#325585;
  min-height:100%;
  transform:translate3d(0,0,0);
  transition:transform .3s cubic-bezier(0.175,0.885,0.32,1.275);
}
body.open .content-wrapper {
  transform:translate3d(-46px,0,0);
}
.content-wrapper .menu-btn {
  display:block;
  float:right;
  color:hsl(0,0%,100%);
  padding:.5em;
  font-size:1.5em;
  text-decoration:none;
}
.menu {
  position:fixed;
  top:0;
  right:0;
  margin:0;
  padding:0;
}
.menu li {
  margin-bottom:.5em;
  list-style-type:none;
}
.menu a {
  display:block;
  text-decoration:none;
  color:hsl(0,0%,100%);
  font-size:1.5em;
  padding:.5em;
  opacity:0;
  transform:translate3d(48px,-48px,0) scale(0);
  transition:.4s .3s all;
}
body.open .menu a {
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
body.open .menu li:nth-child(0) a {
  transition:0.2s .1s cubic-bezier(0.175,0.885,0.32,1.275) all;
}
body.open .menu li:nth-child(1) a {
  transition:0.2s .2s cubic-bezier(0.175,0.885,0.32,1.275) all;
}
body.open .menu li:nth-child(2) a {
  transition:0.2s .3s cubic-bezier(0.175,0.885,0.32,1.275) all;
}
body.open .menu li:nth-child(3) a {
  transition:0.2s .4s cubic-bezier(0.175,0.885,0.32,1.275) all;
}
body.open .menu li:nth-child(4) a {
  transition:0.2s .5s cubic-bezier(0.175,0.885,0.32,1.275) all;
}
body.open .menu li:nth-child(5) a {
  transition:0.2s .6s cubic-bezier(0.175,0.885,0.32,1.275) all;
}
body.open .menu li:nth-child(6) a {
  transition:0.2s .7s cubic-bezier(0.175,0.885,0.32,1.275) all;
}
.content-wrapper {
  padding-top:1px;
  box-sizing:border-box;
}
.spec-link {
  color:#fff;
  display:table;
  margin:100px auto 0;
}

ditempatkan diatas kode </style>

Kode HTML
<menu class="menu">
<li><a href="#" class="fa fa-home"></a></li>
<li><a href="#" class="fa fa-user"></a></li>
<li><a href="#" class="fa fa-phone"></a></li>
<li><a href="#" class="fa fa-globe"></a></li>
<li><a href="#" class="fa fa-gear"></a></li>
<li><a href="#" class="fa fa-search"></a></li>
<li><a href="#" class="fa fa-paper-plane"></a></li>
</menu>
<div class="content-wrapper"> <a href="#" onclick="document.getElementById('body').classList.toggle('open');" class="fa fa-bars menu-btn"></a> </div>

Pada bagian ini silahkan beri ID terlebih dahulu pada body seperti ini <body id="body">  sedangkan untuk menempatkan menunya bisa diatas main-wrapper  atau disesuaikan karena struktur template terkadang berbeda . itulah sedikit tips kali ini dan mudah-mudahan sobat memahaminya kalau ada yg belum paham silahkan diskusikan pada kolom komentar