Membuat 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.
Langkah Kustomisasi
Masukan kode CSS dibawah ini sebelum kode.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;
}
Kode HTML
<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>
Kode HTML ditempatkan diatas kode
Kode JS
$(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');
});
});
Kustomisasi Lanjutan
Mungkin sebagian sobat akan sedikit kebingungan untuk menerapkannya karena untuk pemasangan style Push Menu ini terlebih dahulu kita harus kasih class pada kode <body> . Seperti dibawah ini
<body class="pushmenu-push">
<div id="nav_list">Menu</div>
Silahkan tempatkan sesuai selera , biasanya disebelah kanan untuk header sebelah kiri atau sebaliknya . Kalau belum mengerti bisa kita diskusikan dikolom komentar .