Alternatif membuat push menu dengan onclick event


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

19 komentar

Kalo saya lihat blog ini selain artikelnya menarik juga tampilan blognya ok banget.... mantap dah... salam kenal ya om dari antoncabon

walah blog amburadul kayak gini to mas ... oh ya salam kenal juga mas broh hehe

Tangan jadi pada gatel... jadi pingin nyoba :)

liat demonya simple banget,jadi ngirit ruang.
eh tapi kok blog ini tidak memakainya om?

Ya dicoba mas bud .. nanti tau rasanya hehe

kan sudah ada menu nya mas reo .. ini jg sudah terlalu banyak hehe

Keren banget kang Ruly..
Ditambah lagi tampilan blog kang ruly sekarangg :D ckckck..

Biasa saja sob ...
ckckckck amburadul dul dul ...

Efek animasinya...asoy

Asoy geboy hehe

tampilan efek nya mirip2 kaya hp android gitu ya, hehe, ijin save scrif nya ya :)

Ya gitu deh .. yg penting fast load hehe

centil euy efek na .. :D jadi terpesona .. #fork ahhhh .. :p :p

gumelis nya centil th hehe

keren gan, ijin bookmark ya

keren, lumayan nih di pasang di blog biar tambak keren.

Monggo silahkan gan ...

hehe lumayan .. pastinya dung

Wah bisa diterapin nih kang..buat ngencerin otak hehehehe ( malah kya tts ya) ..selamat hari raya idul fitri mohon maaaf lahir dan bathin Kang