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.

sliding menu css html

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>&nbsp;&nbsp;Facebook</a></li>
        <li><a href="#"><i class="fa fa-google-plus"></i>&nbsp;&nbsp;Google Plus</a></li>
        <li><a href="#"><i class="fa fa-twitter"></i>&nbsp;&nbsp;Twitter</a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i>&nbsp;&nbsp;LinkedIn</a></li>
        <li><a href="#"><i class="fa fa-pinterest"></i>&nbsp;&nbsp;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.

Artikel Lain:

efek salju html5Membuat Efek Salju dengan HTML5 Canvas dan Javascript tabel responsiveCara Membuat Tabel Responsive Dengan CSS dan HTML background video html5Cara Membuat Background Video Full-Screen dengan HTML5 & Jquery video ditengah layar dengan cssVideo Responsive Ditengah Frame Layar Monitor dengan CSS PSD to HTML CSS16 Video Tutorial Konversi PSD ke HTML dan CSS convert psd to html10 Tutorial Cara Slicing PSD ke HTML dan CSS google maps embed codeCara Mendapatkan Kode Embed Google Maps pdf htmlCara Menampilkan File PDF di Website dengan HTML flexbox20 Video Tutorial Belajar Flexbox CSS3 Untuk Desain Website tantangan membuat desain web7 Tantangan Terbesar Dalam Membuat Desain Website bootstrap vs foundationBootstrap digunakan Developer, Foundation oleh Designer kata tim Zurb material design framework19 Framework Untuk Membuat Web Material Design Responsive