Menu (Navigasi) merupakan salah satu elemen atau komponen penting dalam suatu website. Hendaknya susunan menu dibuat secantik dan se-interaktif mungkin, karena dengan menu yang simple dan interaktif dapat memandu para pengunjung web dengan cepat. Dilihat dari berbagai macam bentuk menu, menu atau navigasi setidaknya memiliki 4 bentuk standar, yaitu horizontal, vertical, dropdown (ketiga menu ini, pernah penulis bahas pada serial buku CSS), dan yang terakhir yang akan penulis bahas adalah membuat Menu Tree atau yang disebut juga sebagai menu bercabang, layaknya ranting pohon.
Mungkin jika Anda pernah melihat susunan folder dalam windows explorer, maka kurang lebih akan seperti itu struktur yang akan kita kerjakan, namun dengan teknik simple agar mudah dipelajari. Disini penulis menggunakan bantuan javascript agar lebih web menjadi terlihat responsif, dalam artian kita mengklik sub menu, maka halaman / web browser tidak akan melakukan refresh / reload.
Buat folder baru dengan nama treemenu didalam folder htdocs atau www. Buatlah file dengan nama treemenu.php dan simpan dalam folder treemenu yang telah dibuatkan barusan. Adapun skripnya sebagai berikut :
Skrip treemenu.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="simpletreemenu.js"></script>
<link rel="stylesheet" type="text/css"
href="simpletree.css"></head>
8
<body>
<h4> Simple Menu Tree </h4>
<ul id="treemenu1" class="treeview">
<li> Home </li>
<li> Profil </li>
<li> Kategori
<ul>
<li> Framework </li>
<li> PHP </li>
<li> CSS </li>
<li> SMS Gateway </li>
</ul>
</li>
<li> Kontak </li>
<li> Info Buku
<ul>
<li> Teknik Cepat Membangun Aplikasi Web dengan Framework
CakePHP </li>
<li> Step by Step Membangun Aplikasi SMS dengan PHP dan
MySQL </li>
<li> Pemrograman CSS untuk Pemula </li>
<li> Tip dan Solusi Jitu Pemrograman PHP </li>
<li> dan lain-lain </li>
</ul>
</li>
<li> Download </li>
</ul>
<script type="text/javascript">
ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)
</script>
</body>
</html>
Pada skrip diatas, kita membutuhkan 2 file luar, yaitu simpletree.css dan simpletreemenu.js. untuk itu kita buat file simple.css dan simpan ke dalam satu folder bersama-sama dengan treemenu.php.adapun skripnya sebagai berikut :
.treeview ul {
margin: 0;
padding: 0;
}
.treeview li {
background: white url(list.gif) no-repeat left center;
list-style-type: none;
padding-left: 22px;
9
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;
}
Pada skrip CSS tersebut, setidaknya membutuhkan 3 file gambar sebagai animasi folder pada halaman web. Agar tidak merepotkan Anda, penulis telah menyertakan file source code menu tree yang bisa download disini, setelahnya Anda buka web browser Anda dengan mengetikkan url http://localhost/treemenu/treemenu.php maka hasilnya akan tampak seperti gambar dibawah.
Semoga tutorial kali ini memberikan manfaat untuk Anda.
Heri S Ibrohim
kalau pakai mysql gimana pak. mohon pencerahan
AGUS SAPUTRA
Heri S Ibrohim @ kan dimenu terdiri dari li dan /li
Tinggal bikin aja susunan menu yang telah disimpan didatabase.. terus panggil kueri menggunakan mysql_query("SELECT * FROM menu);
setelah itu tampilkan menu menggunakan:
while ($data = mysql_fetch_array($kuerimenu))
{
echo "li $data[menu]/li";
}
Heri S Ibrohim
Maaf pak, ada contoh buat menu kategori menu bertingkat juga ga?.
misal :
1. Judul buku :
- Buku Pelajaran
- Novel
- komik
2. Baju
- baju anak
- baju dewasa
kalo ada contohnya, minta tolong dikirimkan
terima kasih banyak.
AGUS SAPUTRA
Heri S Ibrohim @ Tidak ada mas, coba mas bisa cari di internet untuk proses menu tree ini, saat ini sudah banyak free source codenya..