Cara membuat sliding menu dengan css dan html | Konten website yang terlalu banyak membuat kita membutuhkan ruang yang cukup luas, sehingga terkadang harus mengorbankan menu atau dengan kata lain menyembunyikan menu untuk mendapatkan ruang.
Menu yang disembunyikan tentu harus bisa ditampilkan kembali ketika kita membutuhkannya, nah oleh karena itu terciptalah sliding menu atau yang biasa disebut juga dengan istikal drawer menu.

Kita bisa membuat sliding menu / drawer menu ini dengan css saja, bahkan bisa membuatnya ala-ala material design. Penasaran?
Cara Membuat sliding menu dengan css dan html
Sliding menu yang ingin kita buat adalah menu yang akan muncul atau hilang ketika sebuah tombol berbentuk gambar tiga garis (hamburger menu) di klik. Menu seperti itu sedang jadi tren saat ini.
Membuat struktur HTML
Pertama persiapkan dulu file HTML (index.html)
Pada file tersebut sertakan file css dari font awesome agar kita bisa menampilkan ikon-ikon yang dibutuhkan, seperti ikon hamburger menu, facebook, twitter dan lainnya.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Kemudian di dalam tag body dan /body, kita buat struktur HTML yang berisi daftar menu dan isi atau konten dari website. Trigger atau pemicu muncul atau menghilangnya menu sebenarnya adalah sebuah checkbox, jadi ketika checkbox terpilih maka menu akan ditampilkan, sedangkan ketika tidak terpilih maka menu akan disembunyikan.
<header>
<input type="checkbox" id="tag-menu"/>
<label class="fa fa-bars menu-bar" for="tag-menu"></label>
<div class="jw-drawer">
<nav>
<ul>
<li><a href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
<li><a href="#"><i class="fa fa-google-plus"></i> Google Plus</a></li>
<li><a href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
<li><a href="#"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
<li><a href="#"><i class="fa fa-pinterest"></i> Pinterest</a></li>
</ul>
</nav>
</div>
</header>
<div class="content">
<h1>Jurnalweb.com</h1>
<p>Contoh pembuatan sliding menu / drawer menu dengan CSS, baca tutorialnya <a href="http://www.jurnalweb.com/tutorial-cara-membuat-sliding-menu-dengan-css-dan-html">disini</a></p>
</div>
Mempercantik dengan CSS
Agar menu tersebut terlihat lebih cantik dan bisa berfungsi dengan baik maka perlu ditambahkan script CSS. Kita menggunakan CSS animation dengan menambahkan efek slide-in dan slide-out untuk memunculkan dan menyembunyikan menu.
* {
padding:0;
margin:0;
}
body {
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
background-color:#FFF
}
header {
width:100%;
background-color:#006faa ;
z-index:1000;
}
.menu-bar {
color:#FFF;
font-size:25px;
cursor:pointer;
padding:10px 12px;
margin-left:10px;
margin-top:5px;
margin-bottom:5px;
}
.menu-bar:hover {
background-color:rgba(0, 0, 0, 0.1);
border-radius:50px;
}
#tag-menu {
display:none;
}
#tag-menu:checked ~ div.jw-drawer {
animation: slide-in 0.5s ease;
animation-fill-mode: forwards;
}
.jw-drawer {
position:fixed;
left:-280px;
background-color:#006faa;
height:100%;
z-index:100;
width:230px;
animation: slide-out 0.5s ease;
animation-fill-mode: forwards;
}
.jw-drawer ul li {
list-style:none;
}
.jw-drawer ul li a {
padding:10px 20px;
text-decoration:none;
display:block;
color:#FFF;
border-top:1px solid #059;
}
.jw-drawer ul li a:hover{
background-color:rgba(0, 0, 0, 0.1);
}
.jw-drawer ul li a i {
width:50px;
height:35px;
text-align:center;
padding-top:15px;
}
@keyframes slide-in {
from {left: -280px;}
to {left: 0;}
}
@keyframes slide-out {
from {left: 0;}
to {left: -280px;}
}
.content{
padding: 100px 0 0 250px;
}
Script diatas pertama-tama akan menyembunyikan / menggeser menu sebanyak 280px melewati lebar layar sehingga tidak terlihat, dan akan memunculkannya secara perlahan kedalam halaman selebar 280px ketika menu di klik.
DEMO | DOWNLOAD CODE
Itulah trik singkat membuat slide menu untuk mempercantik tampilan website Anda, menu tersebut bisa digunakan di halaman utama website maupun di halaman administrator.
Bermanfaat sekali, izin download dan menggunakannya ya, Bro
kalau mindahin hamburgernya jadi di sebelah kanan bagaimana ya kak ?
Thanks tutornya mastah :)
Top Marketop untuk Artikel ini
sangat bermamfaat
Kok g jelas ya gan
Artikel Kurang Bagus
makasih kakak, artikelnya keren. aku bisa belajar buat ikut lomba.
Makasih Banyak Coeg
Sama seperti kata RIANI “TIDAK JELAS” di mana atau bagaimana penempatan kode2 tersebut.
Sayang sekali kalau berbaginya setengah2. Jadi kurang dapat dimanfaatkan.
Makasih atas responnya.
maksasih hehe