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]

avatar reihanagamsk
@reihanagamsk

125 Kontribusi 41 Poin

Diperbarui 6 tahun yang lalu

1 Jawaban:

makasih gan :D, tapi masih bingung fungsi fungsi code nya :D

avatar pemudakoding
@pemudakoding

342 Kontribusi 120 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban