Membuat submenu vertical dengan css di auraCMS

Selasa, 3 November 2009 08:25:57 - oleh : ridwan

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>):

pertama buat database nya :

CREATE TABLE IF NOT EXISTS `menulevel` (
  `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;

<?php
function get_menu($data, $parent = 0) {
	static $i = 1;
	$tab = str_repeat("\t\t", $i);
	if (isset($data[$parent])) {
		$html = "\n$tab";
		$i++;
		foreach ($data[$parent] as $v) {
			$child = get_menu($data, $v->id);
			$html .= "\n\t$tab";
			$html .= ''.$v->title.'';
			if ($child) {
				$i--;
				$html .= $child;
				$html .= "\n\t$tab";
			}
			$html .= '
';
		}
		$html .= "\n$tab
";
		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);
?>