» » Cara Membuat Menu D tree Seperti Folder Windows

Cara Membuat Menu D tree Seperti Folder Windows

Selamat pagi sobat blogger, pada postingan kali ini saya akan berbagi Cara Membuat Menu D tree Seperti Folder Windows. Menu yang satu ini adalah salah satu koleksi menu yang saya share melalui blog ini. Pada postingan sbelumnya saya share Cara Membuat Menu Blog Diatas Header. 
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> 
2. Kemudian masukkan kode dibawah ini tepat dibawah kode diatas.

<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.

0 Response to "Cara Membuat Menu D tree Seperti Folder Windows"

Post a Comment

Subscribe to: Post Comments (Atom)