Cara Membuat Menu Dtree Dengan PHP | Menu dTree adalah menu seperti pohon bercabang yang biasa kita lihat pada saat kita membuka windows explorer pada komputer. Fungsi menu ini hampir sama dengan menu navigasi yang lain, yaitu untuk lebih memudahkan seorang pengunjung menjelajahi isi website kita. Untuk tampilannya kurang lebih seperti gambar di atas.
Baiklah, mari kita mulai Cara Membuat Menu Dtree Dengan PHP, pertama buatlah file php atau html, tutorial Cara Membuat File PHP Di Localhost bisa dilihat Disini jika belum faham, dan jika sudah faham maka langsung kita buat filenya.
Ketikkan script di bawah ini
<html>
<head>
<script type="text/javascript" src="tremenu.js"></script>
<style type="text/css">
.treeview ul {
margin: 0;
padding: 0;
}
.treeview li {
background: white url(list.gif) no-repeat left center;
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
}
.treeview li.submenu {
background: white url(closed.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
}
.treeview li.submenu ul {
display: none;
}
.treeview .submenu ul li {
cursor: default;
}</style>
<body>
<h4> Menu Tree Simple</h4>
<ul id="treemenu1" class="treeview">
<li> Home </li>
<li> Profil </li>
<li> Kategori
<ul>
<li> <a href='http://indo-webst.blogspot.com'>PHP Indonesia </a></li>
<li> PHP </li>
<li> CSS </li>
<li> Delphi </li>
</ul>
</li>
<li> Kontak </li>
<li> Info
<ul>
<li> PHP Indonesia adalah blog pemula </li>
<li> Css dynamiic </li>
<li> Mudah Belajar PHP</li>
</ul>
</li>
<li> Download </li>
</ul>
<script type="text/javascript">
ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)
</script>
</body>
</html>
lalu simpan dengan nama index.php
Langkah selanjutnya adalah kita siapkan gambar kecil sebagai icon folder dan sub folder, silahkan download gambar nya Disini lalu extrak gambarnya, letakkan pada folder yang sama dengan file index.php tadi
Setelah mempersiapkan gambar, yang harus kita persiapkan selanjutnya adalah file JQuery, silahkan lihat scriptnya Disini, Copy semuanya lalu paste di text editor anda dan simpan dengan nama tremenu.js, Jangan lupa, letakkan juga pada folder yang sama dengan gambar kecil dan file index.html
Nah kalau sudah kurang lebih tampilan menu dtree seperti gambar di atas, dan jika ingin Demo, bisa langsung dilihat Disini
Truss, Soure Code lengkapnya bisa langsu di Download Disini
Semoga bermanfaat
0 Response to "Cara Membuat Menu Dtree Dengan PHP"
Post a Comment