Cara Membuat Menu D tree Seperti Folder Windows
Wednesday, December 19, 2012
Edit
Menu D tree ini termasuk menu yang unik, karena tampilanya menyerupai folder pada windows explore, dan menu d tree ini cukup sulit lhoo untuk mencari panduanya di mbah google. Untuk live demonya saya tidak sediakan, tapi sobat bisa lihat tampilanya seperti gambar diatas.
Langsung saja, Cara Membuat Menu D tree :
1. Cari kode
<head> <link href='http://membuatgempar.net23.net/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://membuatgempar.net23.net/dtree.js' type='text/javascript'/> 3. Save template
4. Sobat masuk ke bagian add gadget HTML, dan tambahkan kode dibawah ini pada add gadget HTML :
<div class="dtree">
<p><a href="javascript: d.openAll();"><img src="http://1.bp.blogspot.com/-RbQWnGW5bd8/UKJGKQD3f2I/AAAAAAAACmA/oLAHt0hhYUc/s200/pelajaran%2Bblog%2Bplus.gif" /><b>Buka</b></a> | <a href="javascript: d.closeAll();"><img src="http://2.bp.blogspot.com/-F6ylYYXiatg/UKJKASk86eI/AAAAAAAACnQ/XB9Ka_qHyO4/s200/pelajaran%2Bblog%2Bminus.gif" /><b>Tutup</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','#');
d.add(1,0,'Menu 1')
d.add(3,1,'sub menu 1','');
d.add(10,3,'edit','#');
d.add(20,3,'edit','#');
d.add(30,3,'edit','#');
d.add(40,3,'edit','#');
d.add(50,3,'edit','#');
d.add(60,3,'edit','#');
d.add(70,3,'edit','#');
d.add(80,3,'edit','#');
d.add(90,3,'edit','#');
d.add(100,3,'edit');
d.add(110,3,'edit','#');
d.add(120,3,'edit','#');
d.add(5,1,'sub menu 2');
d.add(10,5,'edit','#');
d.add(20,5,'edit','#');
d.add(30,5,'edit','#');
d.add(40,5,'edit','#');
d.add(50,5,'edit','#');
d.add(60,5,'edit','#');
d.add(70,5,'edit','#');
d.add(80,5,'edit','#');
d.add(90,5,'edit','#');
d.add(2,0,'menu 2','','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(10,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(20,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(20,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(30,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(40,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(50,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(60,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(4,0,'menu 3','#','menu 3','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(6,0,'menu 4','#','menu 4','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(7,0,'menu 5','#','menu 5','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(8,0,'menu 6','#','menu 6','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
document.write(d);
//-->
</script>
</div>
**Keterangan:
Untuk tanda '#',sobat ganti dengan url tujuan misal http://.....
Sedang untuk kode yang saya beri nama 'edit',sobat rubah sesuai dengan keinginan,yang nantinya akan terbaca dalam menu dTree ini.
Okey, cukup sekian sob, terima kasih telah membaca artikel Cara Membuat Menu D tree Seperti Folder Windows.
Semoga bermanfaat.