Buat Menu DTree (Menu Navigasi Seperti pada Windows Explorer)

Pernahkah Anda blogwalking ke blog Mas Anang? Pasti kenal kan? Itu lho, blogger asal Surabaya yang artikel-artikelnya sangat menarik dan menggelitik kalau dibaca. Nah, pembaca pasti bisa melihat di bagian sidebar blog Mas Anang terdapat sebuah menu yang menyerupai menu navigasi pada Windows Explorer. Bentuk menu tersebut juga biasa disebut sebagai DTree Menu.

Pada tutorial website kali ini kita akan mencoba membuat menu Dtree pada website atau blog Anda. Sebenarnya ada beberapa situs luar negeri yang pernah membahas tutorial menu ini. Namun dari hasil temuan saya, bentuk navigasi yang merupakan karya Geir Landrö ini jauh lebih menarik. Tentu tidak salah kalau kita pelajari namun harus tetap mengakui bahwa itu adalah karya Geir Landrö. Berikut langkah-langkah membuat menu DTree:

Copy paste kode berikut sebelum kode </head> pada website atau blog Anda:
<script src='http://nestoriko.googlepages.com/dtree.js' type='text/javascript'/>
Copy paste kode CSS berikut pada file CSS website Anda. Jika pada Blogspot, copy paste sebelum kode ]]></b:skin>

/* dtree */ .bukasemua { padding-left:13px; background: transparent url(http://h1.ripway.com/sinaga/gambar/plus-sign.gif) no-repeat 0 55%; } .tutupsemua { padding-left:13px; background: transparent url(http://h1.ripway.com/sinaga/gambar/minus-sign.gif) no-repeat 0 55%; } .dtree { line-height: 11px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #41484d; white-space: nowrap; } .dtree img { border: 0px; vertical-align: middle; } .dtree a { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #41484d; text-decoration: none; } .dtree a.node, .dtree a.nodeSel { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; white-space: nowrap; padding: 1px 2px 1px 2px; color: #41484d; } .dtree a.node:hover, .dtree a.nodeSel:hover { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: red; font-weight: normal; text-decoration: none; } .dtree a.nodeSel { /* background-color: #c0d2ec; */ } .dtree .clip { overflow: hidden; }
Berikut ini contoh struktur menu Dtree yang akan kita pasang pada website. Silahkan copy paste pada bagian dimana Anda ingin menampilkan menu Dtree pada website Anda. Untuk Blogspot, jika Anda ingin menampilkan pada sidebar:
- Masuk pada dashbor Anda kemudian klik link Tata Letak
- Pilih tab Elemen Halaman. Kemudian klik salah satu link Tambah Gadget. Akan muncul window penambahan gadget baru. Pilih gadget HTML/Javascript
- Copy paste struktur menu berikut pada gadget HTML/Javascript tersebut.
<div class="dtree"> <p style="text-align:center"><a class="bukasemua" href="javascript: d.openAll();">Buka Semua Folder</a> | <a class="tutupsemua" href="javascript: d.closeAll();">Tutup Semua</a></p> <script type="text/javascript">  </script> </div>

Berikut ini penjelasan dari struktur menu Dtree yang ada pada langkah 3 di atas:
Menu Dtree terdiri dari 3 bagian

Menu Utama
Sub Menu, dan
Item Menu.

1. Main Menu yang bisa kita atau tambahkan secara umum berbentuk:

d.add(1,0,'Main Menu 1','fill 11','fill 12','fill 13','fill 
14','fill 15');

d.add(2,0,'Main
 Menu 2','fill 21','fill 22','fill 23','fill 24','fill 25');

Angka 1 dan 2 yang berwarna merah menunjukkan ID main menu. Main menu 1 mempunyai ID=1, dst.
Angka 0 yang berwarna biru menunjukkan main menu berada pada level ke 0, yaitu berada paling puncak.
"Main Menu 1" dan "Main Menu 2" merupakan nama Main Menu yang bisa Anda buat sendiri.
Sedangkan fill 11, fill 12, dan seterusnya merupakan atribut dari main menu tersebut. Setiap atribut (fill) punya defenisi dan fungsi sendiri, yaitu:
- Fill 11: merupakan alamat URL atau link halaman yang akan dituju jika Main Menu 1 diklik. Begitu pula fill 12 yang merupakan link atau URL halaman yang dituju jika Main Menu 2 diklik.
- Fill 12 : merupakan tulisan yang akan muncul jika mouse digerakkan diatas Main Menu 1.
- Fill 13 : merupakan alternatif text untuk menggantikan icon menu.
- Fill 14 : merupakan alamat gambar yang dijadikan icon Main Menu 1.
- Fill 15 : merupakan alamat gambar pengganti icon pada fill 14 jika Main Menu 1 diklik.

Namun, tidak semua fill harus dideklarasikan karena mungkin tidak terlalu penting atau karena sudah dideklarasikan pada kode javascript yang anda link kan pada langkah 1 di atas. Sebagai contoh:

d.add(1,0,'My
 Documents','','My 
Documents','','http://h1.ripway.com/sinaga/gambar/mydocument.gif','http://h1.ripway.com/sinaga/gambar/mydocument.gif');

d.add(2,0,'Arsip Artikel','','Arsip 
Article','','http://h1.ripway.com/sinaga/gambar/archive.gif','http://h1.ripway.com/sinaga/gambar/archive.gif');

2. Sub Menu yang bisa kita buat atau tambahkan berbentuk:

d.add(100,1,'Sub
 Menu 1','fill 11','fill 12','fill 13','fill 14','fill 15');

d.add(101,1,'Sub Menu 2','fill 11','fill 
12','fill 13','fill 14','fill 15');

Coba perhatikan pola ID dari menu-menu tersebut. Angka 100 yang berwarna orange menunjukkan ID Sub Menu 1. Sedangkan angka 1 yang berwarna merah itu sebenarnya adalah ID dari Main Menu 1,sehingga Sub Menu 1 akan menjadi sub menu dari main menu 1.

Sebagai contoh:

d.add(4000,1,'My Pictures','','My 
Pictures','','http://h1.ripway.com/sinaga/gambar/imgfolder.gif','http://h1.ripway.com/sinaga/gambar/imgfolder.gif');

d.add(4001,1,'My Music','','My 
Music','','http://h1.ripway.com/sinaga/gambar/musicfolder.gif','http://h1.ripway.com/sinaga/gambar/musicfolder.gif');

3.Item Menu bentuk umumnya:

d.add(2222,100,'Item
 Menu 1','fill 11','fill 12','fill 13','fill 14','fill 15');

d.add(2223,100,'Item Menu 2','fill 11','fill 
12','fill 13','fill 14','fill 15');

Hampir sama dengan penjelasan Sub Menu, coba perhatikan pola ID dari item-item menu tersebut. Angka 2222 yang berwarna pink menunjukkan ID item Menu 1. Sedangkan angka 100 yang berwarna orange itu sebenarnya adalah ID dari Sub Menu 1,sehingga Item Menu 1 akan menjadi item menu pada sub menu 1.

Begitu Seterusnya.
Jika Anda ingin membuat sub menu di dalam sub menu atau disebut sub sub menu, maka jadikan ID sub menu menjadi parent dari sub sub menu tersebut.

Yang terakhir:
Coba perhatikan kode paling bawah yang Anda copy paste pada langkah 3 di atas:

...

document.write(d);

d.closeAll();

d.openTo(104,true);

d.openTo(103,true);

Kode yang berwarna merah menunjukkan bahwa menu dengan ID 104 dan 103 akan terbuka. Artinya isi dari menu tersebut baik berupa sub menu, sub sub menu, maupun item menu akan terbuka ketika website atau blog pertama kali dibuka.

Buat Menu DTree (Menu Navigasi Seperti pada Windows Explorer)

No comments:

Post a Comment