Tutorial Membuat Dropdown Box Menggunakan CSS3 Animation Dengan Sedikit Trik Checkbox

Dalam tutorial ini kita akan membuat dropdown box dengan menggunakan CSS3 Animation dengan sedikit trik checkbox sebagai triggernya, biasanya ini dibuat dengan bantuan JQuery namun berkat CSS3 kita dapat membuat ini dengan properti transtion.

Silahkan lihat demonya disini.

HTML5 Untuk Dropdown Box

Mari kita lihat markup HTML5 untuk tutorial ini dengan lebih detail

<!-- Dropdown box slider -->
<section class="slider">

  <!-- Checkbox, kita akan menggunakan sedikit trik pada checkbox ini -->
  <input type="checkbox" id="toggle">
  <!-- Kita akan buat label ini sebagai pemicu dropdown slider. -->
  <label for="toggle">
    <!-- icon yang digunakan adalah entypo. kalian dapat mengubahnya -->
    <i class="toggle-icon"></i>
  </label>

  <!-- Konten dari dropdown box slider -->
  <section class="main-content">
    <h1>CSS3 Drop down box</h1>
  </section>

</section>

Komentar di atas di buat agar lebih mudah dipahami. Satu hal penting yang perlu ditambahkan disini adalah bahwa penting untuk memunculkan konten setelah checkbox. Kita perlu ini untuk memanfaatkan ~ selector. Selector ini digunakan untuk memilih sebuah elemen yang datang setelah elemen lain . Dalam hal ini kita perlu memilih konten yang datang setelah checkbox.

Jadi, mari kita lakukan styling.

Trik Checkbox Sebagai Pemicu Dropdown Box

Jadi, mari kita lihat bagaimana kita mengubah checkbox dan label menjadi tombol aktivasi yang terlihat bagus. Pertama-tama, kita menggunakan ikon dari webfont entypo sebagai contoh. Kita gunakan down arrow untuk posisi unchecked, dan up arrow untuk posisi checked.

input#toggle + label i.toggle-icon:before {
  font-family: 'entypo', sans-serif;
  content: "\e764";
}

input#toggle:checked + label i.toggle-icon:before {
  content: "\e767";
}

 Sekarang tentu saja kita perlu menyembunyikan checkbox dan menambahkan beberapa styling ekstra untuk label. Hal ini penting untuk menginisialisasi atas menjadi 0 pada label agar animasi bekerja. Atau anda bisa menggunakan properti transform untuk animasinya.

.slider input#toggle {
  display: none;
}

.slider input#toggle + label {
  font-size: 25px;
  width: 25px;
  height: 25px;
  display: inline-block;
  padding: 10px;
  color: white;
  background: #8f2c2c;
  position: relative;
  top: 0;
  transition: top 0.5s ease-in-out;
}

 Di properti transition ini kita definisikan properti agar animasi berfungsi, kecepatan, dan fungsi dari transisinya. Dan disini ada beberapa styling umum untuk slider dan konten.

.slider {
  width: 600px;
  text-align: center;
  margin: 0 auto;
}

.slider .main-content {
  background: #eee;
  height: 150px;
  position: relative;
  top: -195px;
  transition: top 0.5s ease-in-out;
}

.slider .main-content h1 {
  line-height: 150px;
  color: #30303f;
  width: 100%;
  text-stroke: 1px;
  font-size: 30px;
  text-shadow: 0 1px 1px #000;
  font-family: "Roboto"
}

 Membuat Animasi Dropdown Box Dengan CSS3

Sekarang mari kita lihat betapa mudahnya untuk membuat animasi dropdown box berfungsi seperti ditarik:

input#toggle:checked + label {
  top: 150px;
}

input#toggle:checked ~ .main-content {
  top: -45px;
}

 Apa yang kita lakukan disini adalah mengatur posisi label checkbox dan konten dari dropdown box. Perubahan properti ini akan memiliki animasi seperti yang ditentukan oleh properti transition yang kita definisikan sebelumnya. Perlu di perhatikan bagaimana kita menggunakan ~ selector untuk menargetkan class .main-content yang muncul setelah checkbox.

Sekian tutorial kali ini, kalian bisa lihat demonya disini.

Terimakasih.

Comments

comments