Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Cara Simpel Membuat Menu Seperti SekolahKoding dengan JQUERY
Pertama yang harus dibuat adalah kerangka HTML dulu
<div class="mobile menu">
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#" class="toggle">Close</a>
</div>
<main>
<a href="#" class="button toggle">Klik</a>
</main>
Dan buat file CSS-nya
.button
{ display:inline-block;
text-decoration:none;
padding:10px; }
.mobile.menu
{ position:fixed;
top:0;
left:-250px;
width:250px;
bottom:0;
transition: left .3s ease;
background:rgb(60,60,60); }
.mobile.menu a
{ display:block;
color:white;
padding:10px;
border-bottom:1px solid white; }
.mobile.menu.show
{ left:0; }
Yang terahkir jangan lupa sertakan file JQUERY dan Script untuk effect Menu-nya.
<script>
$(function(){
$('.toggle').bind('click', function(){
$('.mobile.menu').toggleClass('show');
});
});
</script>
PENJELASAN :
Class button hanya untuk styling Class toggle berfungsi sebagai pemacu jquery agar menambahkan Class show yang digunakan ketika toggle di klik maka ditambahkan pada Class Mobile Menu satu Class show. Sebaliknya jika Class toggle dikembalikan maka Class show pada Mobile Menu akan Hilang.
Kenapa memberi nilai width 250px ? karena untuk menghilangkannya cukup dengan property
left : -250;
jadi seakan otomatis ia hilang.
Class show tadi akan digunakan pada jquery dan pada CSS-nya kenapa di beri nilai
.mobile.menu.show { left : 0; }
Karena untuk menggeser menu-nya ke kanan. Semoga paham. CMIIW
[img]https://skspace.sgp1.digitaloceanspaces.com/forums/images/Screenshot_2016-06-11-08-37-58.png[/img]