Cara Membuat Toggle Slide dengan CSS3

Ada berbagai macam cara yang dapat kita lakukan untuk membuat sebuah toggle, ada yang membuatnya dengan jQuery, ataupun dengan CSS3 tergantung selera dan style masing-masing, toggle sendiri merupakan sebuah tombol yang mempunyai efek tersendiri baik menyembunyikan ataupun menampilkan sebuah elemen. Berikut ini akan dijelaskan bagaimana Cara Membuat Toggle Slide dengan CSS3. Pada tahapan pembuatan nya kalian buat sebuah file HTML dan ketikan struktur HTML berikut ini.

<body>
	<input type="checkbox" id="tombol" />
	<label for="tombol"></label>
	<div class="wraper">
	 	<h1>Untuk Membuka Pesan..</h1>
	  	<h2>Silahkan Klik Tombol Open !</h2>
	</div>
	<div class="pesan">
	<h1>What is Lorem Ipsum?</h1>
	<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h3>
	</div>
</body>

Sintak diatas merupakn sebuah konten yang akan ditampilkan pada saat toggle diklik, selanjutnya kita akan membuat tampilan dari konten dan membuat toggle beserta fungsi nya dengan sintak CSS3 berikut.

* {
  margin:0;
  padding:0;
  word-spacing:-2px;
}

h1 {
  font-size:40px;
  font-weight:bold;
  color:#191919;
  -webkit-font-smoothing: antialiased;
}

h3 {
  font-weight:normal;
  font-size:20px;
  color:#888;
  padding:5px 0;
}

.pesan {
	background:#2c3e50;
	color:#FFF;
	position: absolute;
	top: -250px;
	left: 0;
	width: 100%;
	height: 250px;
	padding: 4em 3em;
	transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
	overflow: hidden;
	box-sizing: border-box;

}

.pesan h1 {
  color:#FFF;
}

#tombol {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#tombol + label {
	position:absolute;
	cursor:pointer;
	padding:10px;
	background: #3498db;
	width: 100px;
	padding: 8px 10px;
	color: #FFF;
	line-height:20px;
	text-align:center;
	cursor: pointer;
	margin:20px 50px;
	transition:all 500ms ease;
}
#tombol + label:after {
  	content:"Open" 
}

.wraper {
	transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  	padding:5em 3em;
}

#tombol:checked ~ .pesan {
  	top: 0;
}

#tombol:checked ~ .wraper {
 	margin-top: 250px;
}

#tombol:checked + label {
  	background:#e67e22;
}

#tombol:checked + label:after {
  	content:"Close"
}

Dengan sintak diatas, tombol toggle akan diset menjadi sebuah fungsi dimana akan terjadi efek slide pada konten. Setelah semua sintak diatas kalian ketikan, langkah selanjutnya simpan file terlebih dahulu kemudian kalian jalankan pada browser masing-masing dan lihat hasilnya, maka ketika kalian klik tombol toggle akan terjadi efek slide pada konten.

Baiklah, itu tadi tahapan Cara Membuat Toggle Slide dengan CSS3. Semoga bermanfaat dan jangan lupa share artikel ini supaya lebih bermanfaat bagi orang banyak. Selamat mencoba 🙂

DEMO

Kategori