Cara Membuat Navigasi Menarik Menggunakan Java Script

Salam hangat teman-teman, semoga sehat selalu ya. Pada kesempatan kali ini saya akan mencoba berbagi tutorial bagaimana Cara Membuat Navigasi Menarik Menggunakan Java Script.

Seringkali teman-teman ingin menambahkan efek animasi pada website yang teman-teman buat supaya lebih menarik. Seperti memberi efek animasi pada navigasi website teman-teman.

Ok, langsung saja saya kasih tau Cara Membuat Navigasi Menarik Menggunakan Java Script.

– Pertama ketikan codingan HTML di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Animasi</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="menu-group">
	  <div class="nav">
	    <button id="panel-1">Dumetschool</button>
	    <button id="panel-2">Paket Kursus</button>
	  </div>
	  <div class="panels">
	    <button class="close" id="close">&times;</button>
	    <div class="panel panel-1">
	      <h2>Dumetschool</h2>
	      <p>Lorem Ipsum is simply dummy text of 
the printing and typesetting industry. Lorem Ipsum has 
been the industry's standard dummy text ever since the 
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
	      <p>
	        <a href="#">Read more &rarr;</a>
	      </p>
	    </div>
	    <div class="panel panel-2">
	      <h2>Paket Kursus</h2>
	      <ul>
	        <li>
	          <a href="#">Web Master</a>
	        </li>
	        <li>
	          <a href="#">Web Programming</a>
	        </li>
	        <li>
	          <a href="#">Web Design</a>
	        </li>
	      </ul>
	    </div>
	  </div>
	</div>
	<div class="content">
	<p>
		Where does it come from?
		Contrary to popular belief, 
Lorem Ipsum is not simply random text. It has roots in a 
piece of classical Latin literature from 45 BC, making it over 2000 years old.
	</p>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Animasi</title>

</head>

<body>

<button id="panel-1">Dumetschool</button>

<button id="panel-2">Paket Kursus</button>

</div>

<h2>Dumetschool</h2>

<p>Lorem Ipsum is simply dummy text of

the printing and typesetting industry. Lorem Ipsum has

been the industry's standard dummy text ever since the

1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p>

</p>

</div>

<h2>Paket Kursus</h2>

<ul>

<li>

<a href="#">Web Master</a>

</li>

<li>

<a href="#">Web Programming</a>

</li>

<li>

<a href="#">Web Design</a>

</li>

</ul>

</div>

<p>

Where does it come from?

Contrary to popular belief,

Lorem Ipsum is not simply random text. It has roots in a

piece of classical Latin literature from 45 BC, making it over 2000 years old.

</p>

</div>

</body>

</html>

– Kedua ketikan codingan java script di bawah tag penutup pada </body>, untuk keterangan fungsi-fungsi java scriptnya-nya teman-teman lihat commenting yang saya beri pada gambar di bawah ini:

<script type="text/javascript">
		// klik panel button
		$("#panel-1, #panel-2").click(function() {
		// meng-add class
		$(".menu-group").addClass("is-toggled");

		// untuk menyembunyikan panel
		$(".panel").hide();

		// berfungsi untuk menampilkan satu button yang di klik saja
		var whichPanel = $(this).attr("id");
		$("." + whichPanel).show();
		});

		// berfungsi untuk keluar dari panel
		$("#close").click(function() {
		$(".menu-group").removeClass("is-toggled");
		});

		// tekan esc key, untuk keluar dari panel
		$(document).keyup(function(e) {
		if (e.keyCode === 27) $("#close").click(); // esc
		});
	</script>

// klik panel button

$("#panel-1, #panel-2").click(function() {

// meng-add class

$(".menu-group").addClass("is-toggled");

// untuk menyembunyikan panel

$(".panel").hide();

// berfungsi untuk menampilkan satu button yang di klik saja

var whichPanel = $(this).attr("id");

$("." + whichPanel).show();

});

// berfungsi untuk keluar dari panel

$("#close").click(function() {

$(".menu-group").removeClass("is-toggled");

});

// tekan esc key, untuk keluar dari panel

$(document).keyup(function(e) {

if (e.keyCode === 27) $("#close").click(); // esc

});

</script>

-Ketiga teman-teman jangan lupa me-load file jquery-nya di dalam tag <head> :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

1	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

– Keempat teman-teman buat css-nya saya memberi nama file css-nya dengan nama style.css dan jangan lupa juga tulis link di html untuk menghubungkan file css dengan html.

* {
  box-sizing: border-box;
}

body {
  background: #FFFFFF;
  font-size: 30px;
  font-family: 'Abel', sans-serif;
  line-height: 1.45;
}

.menu-group {
  height: 110px;
}

.nav {
  padding: 1em;
  background: #A1A1A1;
  border-radius: 5px;
  transition: 0.25s;
  transform: rotateX(0);
  transform-origin: bottom;
}

.panels {
  background: #15828F;
  transform-origin: top;
  transform: rotateX(-90deg) translateY(0);
  transition: 0.25s;
  position: relative;
}

//**toggled states**//
.is-toggled .nav {
  transform: rotateX(90deg);
  transform-origin: top;
}

.is-toggled .panels {
  transform: rotateX(0) translateY(-102px);
}

button {
  border: 0;
  font-size: 1em;
  font-family: inherit;
  color: #F8F9F7;
  background: #4DDCE1;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 0 1em;
  cursor: pointer;
}

button:hover {
  background: #62ECF2;
}

.panel {
  padding: 1em;
  min-height: 100vh;
}

.panel a {
  color: #ffffff;
  text-decoration: none;
}

.panel a:hover {
  text-decoration: none;
  color: #1be4fc;
}

.close {
  position: absolute;
  right: 5px;
  top: 5px;
}

.content {
  padding: 0 1em;
}

h2 {
  margin: .5em 0 1em;
  font-weight: 400;
}

p {
  margin-bottom: 1em;
}
li {
  list-style: none;
}

* {

box-sizing: border-box;

}

body {

background: #FFFFFF;

font-size: 30px;

font-family: 'Abel', sans-serif;

line-height: 1.45;

}

.menu-group {

height: 110px;

}

.nav {

padding: 1em;

background: #A1A1A1;

border-radius: 5px;

transition: 0.25s;

transform: rotateX(0);

transform-origin: bottom;

}

.panels {

background: #15828F;

transform-origin: top;

transform: rotateX(-90deg) translateY(0);

transition: 0.25s;

position: relative;

}

//**toggled states**//

.is-toggled .nav {

transform: rotateX(90deg);

transform-origin: top;

}

.is-toggled .panels {

transform: rotateX(0) translateY(-102px);

}

button {

border: 0;

font-size: 1em;

font-family: inherit;

color: #F8F9F7;

background: #4DDCE1;

border-radius: 5px;

text-transform: uppercase;

padding: 0 1em;

cursor: pointer;

}

button:hover {

background: #62ECF2;

}

.panel {

padding: 1em;

min-height: 100vh;

}

.panel a {

color: #ffffff;

text-decoration: none;

}

.panel a:hover {

text-decoration: none;

color: #1be4fc;

}

.close {

position: absolute;

right: 5px;

top: 5px;

}

.content {

padding: 0 1em;

}

h2 {

margin: .5em 0 1em;

font-weight: 400;

}

p {

margin-bottom: 1em;

}

li {

list-style: none;

}

Ok, sekarang kita lihat hasilnya yah teman-teman:

Nah, pada saat teman-teman klik salah satu dari dua panel biru di atas maka hasilnya akan seperti ini:

Di sini saya klik panel pertama yaitu panel dumetschool maka akan tampil seperti tampilan di atas. Apa bila teman teman klik tombol close di sebelah kanan atas maka tampilannya akan kembali ke menu awal dan bisa juga tekan tombol esc untuk mengembalikan ke menu awal.

Nah efek yang berfungsi adalah efek yang kita berikan menggunakan java script.

Sekian tutorial dari saya kali ini tentangÂ CaraÂ Membuat Navigasi Menjadi Menarik Menggunakan Java Script. Selamat mencoba dan tetap jaga kesehatan selalu yah teman-teman.

Facebook DUMET School

Categories