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 .
Selamat pagi Kang Ruly, walahh kasep pisan Kang Slideout navigasinya
BalasHapusSetelah saya lihat demonya, keren dan kasep pisan kaya Kang Admin blog ini :)
Bingah da Abi, dapet Pertamax di artikel slideout navigation nya Kang Ruly
HapusHatur nuhun nya Kang Ruly, tutorialnya :-bd
Selamat malam mas hehe ... Lumayan lah kang buat aksesoris mah ..
Hapussok aya-aya wae siakang mah ah
m'bung eleh ku kang Saud, ikutan nangkring disini ah, supaya tampang saya jelas terlihat...halaaaa
HapusTuh pan meni kasep kitu kang hehe amis jiga hui cilembu katingalna hehe
HapusEuleuhhh enya geuning nya Kasepan Kang Lembu nya ? =D
Hapushanjakal eleh bodas ku adminna euy...eta gaya rambut jeung kacamatana meni gaia pisan-lah.
HapusPan gaul kang .. ari bujangan mah pan kieu hehe
HapusIni dia yang ane cari.. menu yang kemaren kurang waw.. yang ini baru waw :D
BalasHapusYang selanjutnya selalu lebih baik sob ...
HapusMantap gan .. ijin coba buat blog saya :D
BalasHapusMonggo silahkan ...
Hapusternya keren kang ruly boleh dicoba di template lain nih :D
BalasHapusBaru tahu ya wkwkwk .. silahkan mas
Hapusiya mas, keren hasilnya :D
Hapusmantap sekali....! saatnya modif tampilan, thanks bgt ya
BalasHapusLumayan ... silahkan di cicipi hehe
HapusPokoe joget - pokoe joget .. siap
BalasHapusKeren Sob, tapi saya blm ada waktu nih buat utak-utik template lagi, makasih tipsnya sob :)
BalasHapusYoi entar , kapan kapan aja
HapusWow mantab kang..lanjut terus
BalasHapusLumayan kang hehe ...
HapusAsli betah di blogna kang.. mantap layoutna.. kantun homepage acan berubah :D
BalasHapusWah hehe .. iya nyaeta kang masih bingung kanggo homepage na ieu teh masih bimbang !!
Hapusabdi ge tos bosen sareng tampilan nu ayeuna.. komo seueur klonengana
HapusRubah deui kang lah meh carapeun deui wkwkwk
Hapusditunggu perubahan BKI, kalau bisa di encrypt kodenya biar yang mau klon gk bisa baca :D
HapusUrang antosan we ku sadayana kang ..
Hapuskang kode js diletakkan dimana ya??
BalasHapusdiatas kode
Hapus</body>
Lihat di demonya aja keren, apalagi di terapin ke blog =D
BalasHapusMakasih mas ruly tutorialnya...
Lumayan lah .. sama-sama sis !!!
Hapusliat demo slideout navigasinya jadi pengen masang kayanya bakalan mempermudah tamu buat nyari apapun yang ada diblog ya.
BalasHapuspinter ih ci akang teh
naah ini dia yg di cari cari -_- :D makasih kakak .
BalasHapuskalau untuk blog saya yg xkomo itu bisa tak yah kk fungsi slide show ny di terapin gtu ?
HapusPada dasarnya untuk semua template juga bisa dek ..hehe
Hapusbagaimana kalau di gabungkan dengan menu accordian yg dari kakak ini : http://duniaradioku.blogspot.com/2013/11/membuat-menu-sidebar-accordion.html
Hapussaya coba kok gagal yah ..
Kayaknya bisa sih .. cuma harus dicoba-coba dulu takut ada jquery yg bentrok ...
Hapusmau dong di PUSHH.. kakak!! :D . wkwkwk
BalasHapuskang rian -_- waduuh ... :D
HapusBrakatak .. kang rian anya-anya wae ah
HapusMampir lagi Kang Ruly simak tutorial nu kasep ini
BalasHapusfull pokokna mah sukses terus Kang Ruly :)
Mangga kang haturan wilujeng sumping .... !!!
HapusKeren Kang tinggal modifikasi dikit pasti hasilnya lebih bagus....
BalasHapusHatur nuhun Kang :)
Iya itu tinggal kreatifnya saja kang !!!
Hapuskasep pisan atuh menuna, push push body na :D
BalasHapusLumayan kang ....
Hapusbukan lumayan lagi Kang ini mah, tos tutorial tingkat lanjut ieu mah :-d
HapusYa daripada molohok kang mending rada kreatif saya teh ...
Hapusdi modifikasi dikit lebiuh mantep
BalasHapushttp://zugamedia.blogspot.com/2014/03/asus-notebook-terbaik-dan-favoritku.html
Yups pasti tuh hehe
Hapuskeren bisa buat bahan refrensi menu blog :) trimakasih gan
BalasHapushttp://handexcel.blogspot.com/
Sama-sama sob ...
Hapuskeren mas, penuh kreaktif :)
BalasHapusDaripada melongo mulu hehe
Hapusmalah jadi cengo..
Hapuskang ruly saya mau tanya maksud dari harus kasih class pada kode body
BalasHapuskode
<body class="pushmenu-push">
dan
<div id="nav_list">Menu</div>
di taruh di mana ya kang saya bingung kang ...
Kode <body> pada template kamu dirubah menjadi <body class="pushmenu-push"> dan kode <div id="nav_list">Menu</div> sebagai kode/tombol pemanggil untuk menunya kalau pada template kamu di area #top-menuwrapper
Hapuswedew dah master class ini mah, nggak perlu lagi komentar :D
BalasHapuswkwkw saha hela atuh kang guruna hehe
Hapusdi bookmarks dulu kang untuk blog baru saya nanti
BalasHapussalam kenal buat semua rekan disini :)
Monggo sob .. salam kenal juga dari kami
Hapus