Cara Membuat Toggle Slide dengan CSS3
Ada berjenis-jenis macam cara yang dapat kita lakukan bagi merancang sebuah toggle, ada yang membuatnya dengan jQuery, ataupun dengan CSS3 tergantung selera dan style masing-masing, toggle sendiri adalah sebuah tombol yang mempunyai efek tersendiri bagus menyembunyikan ataupun menampilkan sebuah unsur. Berikut ini akan dideskripsikan bagaimana Cara Membuat Toggle Slide dengan CSS3. Di tahapan perancangan nya kalian bikin sebuah file HTML dan ketikan struktur HTML berikut ini.
<body>
<input type=checkbox id=tombol />
<label for=tombol></label>
<div class=wraper>
<h1>Bagi 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 di ketika toggle diklik, berikutnya kita akan merancang tampilan dari konten dan merancang toggle dan juga guna 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 guna dimana akan terjadi efek slide di konten. Setelah segala sintak diatas kalian ketikan, langkah berikutnya simpan file terlebih dahulu kemudian kalian jalankan di browser masing-masing dan lihat hasilnya, karenanya ketika kalian klik tombol toggle akan terjadi efek slide di konten.
Baiklah, itu tadi tahapan Cara Membuat Toggle Slide dengan CSS3. Semoga bermanfaat dan jangan lupa share artikel ini supaya lebih bermanfaat untuk orang banyak. Selamat mencoba 🙂
Sumber https://kursuswebsite.org
