Menu Horizontal Multi Level Menggunakan jQuery & PHPCSSPHPTutorialjQuery
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>):
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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:
Dengan menggunakan
jquery dan plugin jquerycssmenu, menu tersebut bisa kita ubah menjadi sebuah
menu dropdown yang lebih menghemat tempat. Tinggal tambahkan script berikut ini
di dalam head:
|
1
2
3
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>
|
Membuat menu dinamis
dari database
Untuk membuat menu
secara dinamis, kita bisa menggunakan database untuk menyimpan data menunya. Di
bawah ini adalah struktur tabel untuk menyimpan menu:
|
1
2
3
4
5
6
7
8
|
CREATE TABLE `menu` (
`id` tinyint(3) UNSIGNED NOT NULL AUTO_INCREMENT,
`parent_id` tinyint(3) UNSIGNED NOT NULL DEFAULT '0',
`title` varchar(100) NOT NULL DEFAULT '',
`url` varchar(100) NOT NULL DEFAULT '',
`menu_order` tinyint(3) UNSIGNED NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM;
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<?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);
?>
|
