Tip cepat : Trik membuat dropdown dengan checkbox menggunakan CSS

Dalam tip cepat ini, kita akan membahas trik membuat dropdown menu yang bergantung pada elemen HTML yaitu checkbox. Trik ini hanya menggunakan CSS tanpa Javascript sedikitpun, simak baik-baik yaa..

Kalian bisa melihat preview/demonya disini.

HTML Markup

Struktur HTML nya akan terlihat seperti ini. Perlu dicatat, bahwa posisi elemen input harus diatas atau yang pertama, sebelum label dan ul. Kalian akan tahu mengapa ini diperlukan, ketika kita membahas CSSnya.

<div class="dropdown">
    <input type="checkbox" id="checkbox_toggle">
    <label for="checkbox_toggle">Klik Untuk Expand</label>
    <ul>
        <li><a href="http://www.trustme.co.id">Link Pertama</a></li>
        <li><a href="http://www.trustme.co.id">Link Kedua</a></li>
        <li><a href="http://www.trustme.co.id">Link Ketiga</a></li>
        <li><a href="http://www.trustme.co.id">Link Keempat</a></li>
    </ul>
</div>

Seperti yang kalian lihat, tidak ada yang luar biasa disini, strukturnya terlihat biasa-biasa saja bukan? ini yang sering digunakan :

  •  div akan berfungsi sebagai container atau wadah untuk semuanya.
  •  input type=checkbox diperlukan karena ini yang akan diperiksa berdasarkan dicentang atau tidaknya. Elemen ini akan disembunyikan setiap saat.
  •  label akan digunakan untuk memanipulasi tampilan checkbox yang berfungsi sebagai pemicu dropdown.
  •  ul ini hanyalah daftar biasa agar terlihat ketika dropdown di expand.

Trik CSS untuk Checkbox

Kita hanya perlu status elemen checkbox tercentang atau tidak, kita bisa menggunakan CSS pseudo selector  :checked. Itu akan tercentang ketika kita mengklik label yang sudah memanipulasi tampilan checkbox. Pertama kita sembunyikan checkboxnya :

input[type=checkbox]{
    display: none;
}

Kita sembunyikan juga ul secara default – menu akan terlihat ketika dropdown di expand.

ul{
    display: none;
}

Dan disinilah triknya. Jika kita menggabungkan :checked dengan pemilih umum (~) kita dapat merubah properti CSS dari elemen yang mengikuti checkbox. Ini adalah alasan kenapa kita menaruh input checkbox lebih dulu pada strukturnya.

input[type=checkbox]:checked ~ ul {
    display: block
}

CSS diatas akan menampilkan unordered list atau ul ketika checkboxnya di centang. Untuk stylingnya kalian bisa menambahkan kode CSS berikut :

.dropdown{
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #FFF;
}
label{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    background-color: #57A0D4;
    padding: 15px 20px;

    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
ul{
    position: absolute;
    list-style: none;
    text-align: left;
    width: 100%;
    z-index: 1;
    margin:0;
    padding:0;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

    display: none;
}
ul li{
    padding: 15px;
    background-color: #fff;
    color: #4FB9A7;
    margin-bottom: 1px;
    cursor: pointer;
}

ul li:hover{
    background-color: #4FB9A7;
    color: #FFF;
}

ul li a{
    color: inherit;
    text-decoration: none;
}

Dengan begitu tampilan akan terlihat kurang lebih seperti ini :

dropdown

Kalian bisa melihat previewnya disini

Sekian Tip Cepat atau Quick Tips untuk membuat dropdown dengan checkbox menggunakan CSS. Semoga bermanfaat. Terima kasih.

Comments

comments