Membuat Menu Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button tertanda ) dan sekaligus ini jawaban dan request para sahabat.

Berikut Tutorialnya.

Langkah 1 : Masukan kode CSS dibawah ini sebelum kode </style>

.pushmenu { /*this is the nav*/
  background: #3c3933;
  font-family: Arial, Helvetics, sans-serif;
  width: 240px;
  height: 100%;
  top: 0;
  z-index: 1000;
  position:fixed;
}
.pushmenu h3 {
  color: #cbbfad;
  font-size: 14px;
  font-weight: bold;
  padding: 15px 20px;
  margin: 0;
  background: #282522;    
  height: 16px;
}
.pushmenu a {
  display: block; /* drops the nav vertically*/
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-top: 1px solid #56544e;
  border-bottom: 1px solid #312e2a;
  padding: 14px;
}
.pushmenu a:hover {
  background:#00A287;
}
.pushmenu a:active {
  background: #454f5c;
  color: #fff;
}
.pushmenu-left {
  left: -240px;
}

.pushmenu-left.pushmenu-open {
  left: 0;
}

.pushmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}
.pushmenu-push-toright {
  left: 240px;
}
/*Transition*/
.pushmenu, .pushmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;  
}
#nav_list {
  background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
  cursor: pointer;
  height: 27px;
  width: 33px;
  text-indent: -99999em;
}
nav-list.active {
  background-position: -33px top;
}
 .buttonset {
      background: #00A287;
      height: 16px;
      padding: 10px 20px 20px;
 }
.pushmenu { /*this is the nav*/
  background: #3c3933;
  font-family: Arial, Helvetics, sans-serif;
  width: 240px;
  height: 100%;
  top: 0;
  z-index: 1000;
  position:fixed;
}
.pushmenu h3 {
  color: #cbbfad;
  font-size: 14px;
  font-weight: bold;
  padding: 15px 20px;
  margin: 0;
  background: #282522;    
  height: 16px;
}
.pushmenu a {
  display: block; /* drops the nav vertically*/
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-top: 1px solid #56544e;
  border-bottom: 1px solid #312e2a;
  padding: 14px;
}
.pushmenu a:hover {
  background:#00A287;
}
.pushmenu a:active {
  background: #454f5c;
  color: #fff;
}
.pushmenu-left {
  left: -240px;
}

.pushmenu-left.pushmenu-open {
  left: 0;
}

.pushmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}
.pushmenu-push-toright {
  left: 240px;
}
/*Transition*/
.pushmenu, .pushmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;  
}
#nav_list {
  background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
  cursor: pointer;
  height: 27px;
  width: 33px;
  text-indent: -99999em;
}
nav-list.active {
  background-position: -33px top;
}
 .buttonset {
      background: #00A287;
      height: 16px;
      padding: 10px 20px 20px;
 }

Langkah 2 : Simpan kode HTML diatas kode outer-wrapper ( setiap struktur template berbeda , jadi silahkan disesuaikan )

<nav class="pushmenu pushmenu-left">
    <h3>Menu</h3>
    <a href="#">Home</a>
    <a href="#">Nav2</a>
    <a href="#">Nav3</a>
    <a href="#">Nav4</a>
    <a href="#">Nav5</a>
    <a href="#">Nav6</a>
    <a href="#">Nav7</a>
  </nav>

Langkah 3 : Cari kode <body>

<body class="pushmenu-push">

Langkah 4 : Letakan JavaScript diatas </body>

$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});

Langkah 5 : Letakan kode pemaggil di area #top-menuwrapper

<div id="nav_list">Menu</div>

Berkomentarlah dengan sopan dan menggunakan kata-kata bijak.
Jangan berkomentar dengan menaruh link di komentar karena saya akan menghapus komentar tersebut

Jika tidak tau cara mendownload di blog ini silakan baca Panduan Download Disini

Kami hanya sekedar berbagi kepada para sobat disini dan saya tidak bertanggung jawab atas segala bentuk kerusakan yang di timbulkan karena telah menggunakan produk Ilegal

Jika ingin yang aman tanpa resiko belilah produk asli dari pengembang software.

Konversi KodeTutupOOT & Request Tutorial

Terima Kasih Atas Komentar Anda