Membuat Tree Menu Layaknya Explorer dengan menggunakan javascript

Menarik tentu apabila kita dapat memiliki website dengan tampilan menu layaknya di windows explorer. Ternyata cukup mudah untuk membuat tampilan menu seperti itu, yang dibutuhkana hanyalah sebuah javascript sebagai pembuat efek dan tag css untuk style tampilan dari menu. Berikut ini saya ingin berbagi cara membuat menu layaknya Explorer atau biasa disebut dengan Tree menu.

Chapter 1

Dalam pembuatan menu seperti ini terdapat 3 bagian utama, yaitu CSS, HTML, dan Javascript. Chapter pertama ini menjelaskan mengenai CSS rule yang akan dipakai dalam pembuatan Tree ini.

Letakkan Script berikut di antara tag HEAD

body{
font: 10pt Verdana,sans-serif;
color: navy;
}
.trigger{
cursor: pointer;
cursor: hand;
}
.branch{
display: none;
margin-left: 16px;
}

CSS rule ini berisi tiga bagian, yang pertama adalah bagian “body” yang dipakai untuk mengatur jenis font dan warna background apabila di-klik.
Bagian kedua adalah .trigger,bagian ini berfungsi untuk merubah pointer menjadi berbentuk hand atau tangan.
Bagian ketiga adalah .branch, bagian ini berfungsi sebagai pengatur tampilan sehingga menu-menu yang berada di bawah menu induknya tidak diperlihatkan terlebih dahulu.