Dropdown widget Linklist

Mengubah widget sidebar menjadi Dropdown

Penggunaan menu atau tombol dropdown sangatlah efisien karena menghemat ruang. Dan item menu atau konten yang berada didalamnya dengan mudah dapat diakses cukup sekali klik ataupun hover cursor.

Dropdown terdapat 2 jenis yaitu :

1. Dropdown klik :

   Membutuhkan klik untuk membuka konten itemnya.

2. Dropdown hover :

   Cukup mengarahkan cursor untuk mebuka konten itemnya.

Penerapan pada widget lebih mudah jika menggunakan dropdown jenis klik, ikuti cara membuat widget dropdown dibawah ini.

Cara membuat Widget Dropdown

Untuk membuat Dropdown dari widget, diutamakan widget yang berada di bilah samping (sidebar). Sebagai contoh, perhatikanbuka sidebar yang ada disebelah kiri halaman ini (klik tombol navigasi kiri bawah.). Pada sidebar tersebut widget Referensi dan Kategori yang diubah menjadi Dropdown.

Disarankan memilih widget dengan type LinkList atau PageList karena widget type ini berupa daftar.

Untuk memulai, masuk ke halaman template HTML,
Cari widget yang akan diubah menggunakan tombol Widget agar lebih cepat.

Lalu perhatikan tepat dibawah tag penutup </b:widget-settings> terdapat kode seperti dibawah ini.

<b:includable id='main'>
   <b:include name='widget-title'/>
   <b:include name='content'/>
 </b:includable>

Ganti kode tersebut dengan kode berikut ini :

<b:includable id='main'>
   <b:include name='widget-title'/>
   <details>
     <summary>
       <b:include name='content'/>
     </summary>
   </details>
 </b:includable>

Lalu copy paste CSS ini untuk mengatur tampilan ikonnya.

.sidebar-container details {
    position: relative;
}
.sidebar-container details summary {
    list-style: none;
    cursor: pointer;
    transition: linear 0.4s;
}
.sidebar-container details summary::after {
    content: '\25bc'; /*--ikon down--*/
}
.sidebar-container details[open] summary:after {
    content: '\25ba'; /*--ikon up--*/
}
.sidebar-container details summary:after,
.sidebar-container details[open] summary:after {
    position: absolute;
    right: 8px;/*--sesuaikan--*/
    top: 5px;/*--sesuaikan--*/
}

Untuk content:'\xxx' bisa diganti atau sesuaikan dengan jenis ikon yang dipakai dalam template masing-masing. Pada kode diatas menggunakan ikon Symbol HTML yang bisa tampil tanpa perlu kode / script tambahan.

⇐ Sebelumnya

Selanjutnya ⇒