Di dalam sebuah website, seringkali kita menemukan penggunaan
menu bertingkat seperti pada gambar di atas. Menu yang bertingkat
tersebut sebenarnya adalah sebuah struktur pohon/tree di mana suatu menu
bisa memiliki anak (submenu), dan submenu tersebut juga bisa memiliki
anak lagi dan seterusnya sampai level tak terbatas.
Berikut ini adalah contoh struktur html menu yang terdiri dari 3 level (menggunakan tag html <ul>
dan <li>
):
<ul> <li><a href="menu1.html">Menu 1</a></li> <li><a href="menu2.html">Menu 2</a></li> <li><a href="menu3.html">Menu 3</a> <ul> <li><a href="menu31.html">Sub Menu 3.1</a></li> <li><a href="menu32.html">Sub Menu 3.2</a> <ul> <li><a href="menu321.html">Sub Menu 3.2.1</a></li> <li><a href="menu322.html">Sub Menu 3.2.2</a></li> <li><a href="menu323.html">Sub Menu 3.2.3</a></li> </ul> </li> <li><a href="menu33.html">Sub Menu 3.3</a></li> </ul> </li> <li><a href="menu4.html">Menu 4</a></li> </ul>
Kode html tersebut akan menghasilkan tampilan seperti ini:
- Menu 1
- Menu 2
- Menu 3
- Sub Menu 3.1
- Sub Menu 3.2
- Sub Menu 3.2.1
- Sub Menu 3.2.2
- Sub Menu 3.3
- Menu 4
<link rel="stylesheet" type="text/css" href="jquerycssmenu.css" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquerycssmenu.js"></script>
Kemudian gunakan script php ini untuk membuat list secara dinamis dari database tersebut. Script ini menggunakan sebuah fungsi rekursif untuk mengambil menu sampai ke level tak terbatas.
<?php function get_menu($data, $parent = 0) { static $i = 1; $tab = str_repeat("\t\t", $i); if (isset($data[$parent])) { $html = "\n$tab<ul>"; $i++; foreach ($data[$parent] as $v) { $child = get_menu($data, $v->id); $html .= "\n\t$tab<li>"; $html .= '<a href="'.$v->url.'">'.$v->title.'</a>'; if ($child) { $i--; $html .= $child; $html .= "\n\t$tab"; } $html .= '</li>'; } $html .= "\n$tab</ul>"; return $html; } else { return false; } } mysql_connect('localhost', 'root', ''); mysql_select_db('tes'); $result = mysql_query("SELECT * FROM menu ORDER BY menu_order"); while ($row = mysql_fetch_object($result)) { $data[$row->parent_id][] = $row; } $menu = get_menu($data); ?>Semoga Bermanfaat...!
terimakasih gan...
BalasHapusartikelnya sangat membantu
hahhaha,dapek ang blosg's sadam
BalasHapusMasih kurang...!
BalasHapusApa sih isinya...!
BalasHapusUdah ga ada isinya + Jeleknya Lagi.
Terimakasih gan atas komentar2nya...!
BalasHapusdan sy mohon masukannya dm kesempurnaan blog ini.
Terimakasih