Untuk membuat sebuah web yang indah beserta menu dan sub menu yang dinamis maka kita terlebih dahulu harus mengurutkan menu beserta sub menu tersebut secara manual. Tapi bagaimana caranya menyusun menu dan sub menunya berdasarkan parent id masing-masing menu tersebut jika menu-menu tersebut terdapat di dalam sebuah database? Berikut akan saya paparkan bagaimana caranya mengurutkan menu-menu yang berasal dari database.

Pertama-tama kita buat terlebih dahulu sebuah database menu dan setelah itu kita siapkan tabel-tabel yang diperlukan.

1. Create Database Menu

CREATE TABLE IF NOT EXISTS `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  DEFAULT CHARSET=latin1 AUTO_INCREMENT=24 ;

2. Buat File Script jquerycssmenu.css

.jquerycssmenu {
	background: #eee;
	border-bottom: 1px solid #315091;
	padding: 35px 0 0 17px;
}
.jquerycssmenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.jquerycssmenu ul li {
	position: relative;
	display: inline;
	float: left;
}
.jquerycssmenu ul li a {
	display: block;
	padding: 5px 7px 4px 7px;
	margin-right: 3px;
	border: 1px solid #315091;
	border-bottom-width: 0;
	color: #fff;
	text-decoration: none;
	background: #6D84B4;
}
.jquerycssmenu ul li a:hover {
	background: #333;
	color: #fff;
}
.jquerycssmenu ul li ul {
	position: absolute;
	left: 0;
	display: block;
	visibility: hidden;
	border-bottom: 1px solid #315091;
	border-top: 1px solid #315091;
}
.jquerycssmenu ul li ul li {
	display: list-item;
	float: none;
}
.jquerycssmenu ul li ul li ul {
	top: 0;
}
.jquerycssmenu ul li ul li a {
	width: 160px;
	background: white;
	color: black;
	padding: 4px 5px;
	margin: 0;
	border-top-width: 0;
	border-top: 1px solid #eee;
}
.jquerycssmenu ul li ul li a:hover {
	background: #333;
	color: #fff;
}
.downarrowclass {
	position: absolute;
	top: 11px;
	right: 10px;
}
.rightarrowclass {
	position: absolute;
	top: 8px;
	right: 5px;
}
*:first-child+html .jquerycssmenu {
	height: 1%;
}
* html .jquerycssmenu{
	height: 1%;
}
* html .jquerycssmenu ul li ul li a {
	display: inline-block;
}

3. Buat File Script jquerycssmenu.js

var arrowimages = {
down: ['downarrowclass', 'images/arrow-down.gif',25],
right: ['rightarrowclass', 'images/arrow-right.gif']
}
var jquerycssmenu = {
fadesettings: {
overduration:350,
outduration:100
},
buildmenu: function(menuid, arrowsvar) {
jQuery(document).ready(function($) {
var $mainmenu = $("#"+menuid+">ul")
var $headers = $mainmenu.find("ul").parent()
$headers.each(function(i) {
var $curobj = $(this)
var $subul = $(this).find('ul:eq(0)')
this._dimensions = {
w:this.offsetWidth,
h:this.offsetHeight,
	subulw:$subul.outerWidth(),
	subulh:$subul.outerHeight()
}
this.istopheader = $curobj.parents("ul").length == 1 ? true : false
$subul.css({top:this.istopheader ? this._dimensions.h + "px" : 0})
$curobj.children("a:eq(0)")
.css(this.istopheader ? {paddingRight:arrowsvar.down[2]} : {})
.append('<img src="' + (this.istopheader?arrowsvar.down[1]:arrowsvar.right[1])
+'" class="'+(this.istopheader ? arrowsvar.down[0] : arrowsvar.right[0])
+'" style="border:0;" />')
$curobj.hover(function(e) {
var $targetul = $(this).children("ul:eq(0)")
this._offsets = {left:$(this).offset().left,top:$(this).offset().top}
var menuleft = this.istopheader ? 0 : this._dimensions.w
menuleft = (this._offsets.left+menuleft + this._dimensions.subulw>$(window).width())?(this.istopheader?-this._dimensions.subulw+this._dimensions.w:-this._dimensions.w):menuleft
	$targetul.css({left:menuleft+"px"})
	.show()
},function(e) {
$(this).children("ul:eq(0)").hide()
})
})
$mainmenu.find("ul").css({display:'none',visibility:'visible'})
})
}
}
jquerycssmenu.buildmenu("myjquerymenu",arrowimages)

4. Buat File Script index.php

<?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;
 }
}

$menu = get_menu($data);
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu Horizontal</title>
<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>
<style type="text/css">
body { font: 11px Tahoma, sans-serif; margin: 0; padding: 0; }
a { color: #3150a9; text-decoration: none; }
#content { padding: 10px; margin: 15px; border: 1px solid #ccc; width: 500px; background: #fafafa; }
</style>
</head>
<body>

<div id="myjquerymenu">
<?php echo $menu; ?>
<br style="clear: left" />
</div>

<div id="content">
<p>
Di atas ini adalah contoh menu horizontal multi level yang memanfaatkan:
<ul>
 <li>Framework javascript jQuery</li>
 <li>Plugin jquerycssmenu</li>
 <li>MySQL untuk menyimpan data menu</li>
 <li>PHP untuk membuat data menu ke dalam bentuk html list (&lt;ul&gt;&lt;li&gt;)</li>
</ul>
</p>
<p>
Kembali ke artikel:<br />
<a href="http://www.tanohaceh.com/?p=2081">Menu Horizontal Multi Level Menggunakan jQuery & PHP</a>
</p>
</div>

</body>
</html>