Membuat Menu Treeview dengan jQuery dan HTML

Treeview

Adalah menu yang berbentuk seperti pohon dikarenakan banyak cabangnya seperti terlihat pada gambar dibawah ini:

Mendownload File

Saya ingin membuat menu Treeview seperti terlihat pada gambar diatas, caranya ikuti langkah dibawah ini:

Download jQuery Treeview dari http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

Extractlah file hasil downloadan, lalu cari file berikut ini:

  • lib/jquery.js
  • jquery.treeview.css
  • lib/jquery.cookie.js
  • jquery.treeview.js
  • folder images

Keempat file dan satu folder ini akan digunakan dalam langkah selanjutnya

Membuat Menu Treeview

Buatlah satu folder bernama menu

Lalu copylah 4 file dan stau folder yang terdapat dalam langkah sebelumnya ke folder ini sehingga folder menu ini berisi seperti gambar dibawah ini:

Sekarang buatlah satu file HTML bernama menu_treeview.html dengan isi seperti dibawah ini:

<html>
<head>

<title>jQuery treeview</title>

<link rel=”stylesheet” href=”jquery.treeview.css” />

<script src=”jquery.js” type=”text/javascript”></script>

<script src=”jquery.cookie.js” type=”text/javascript”></script>

<script src=”jquery.treeview.js” type=”text/javascript”></script>
<script type=”text/javascript”>

$(document).ready(function(){

$(“#red”).treeview({

animated: “fast”,

collapsed: true,

unique: true,

persist: “cookie”,

toggle: function() {

window.console && console.log(“%o was toggled”, this);

}

});

})
</script>
</head>

<body>

<ul id=”red” class=”treeview-red”>

<li><span>Materi</span>

<ul>

<li><span>Add Materi</span></li>

<li><span>Sub Materi</span>

<ul>

<li><span>Add Materi</span></li>

</ul>

</li>

</ul>

</li>

<li><span>Quiz</span>

<ul>

<li><span>Add Quiz</span></li>

</ul>

</li>

<li><span>Sumber</span>

<ul>

<li><span>Add Sumber</span></li>

</ul>

</li>

</body>

</html>

Hasil:
Sekarang buka file menu_treeview.html dengan browsermu.

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.

You may also like...

1 Response

  1. Dimas Adityo says:

    trima kasih banyak gan,,ane da coba dan berhasil..semoga menjadi amal jariah bagi agan yah,,keep posting
    (btw click kanan nya di enabled in sih hehehe)

Leave a Reply

Your email address will not be published. Required fields are marked *