Solusi Drop Down Menu 3 Level pada Lokomedia 1.5

Apycom.com adalah jquery menu yang dipakai pada drop down menu di lokomedia 1.5 . Sayangnya pada template bawaan, dropdown menu lokomedia hanya mengakomodasi sampai menu level 2 saja. Bagaimana jika kita ingin mebuat menu sampai beberapa level? Sebenarnya apycom.com bisa melakukannya. Kita bisa melihat struktur html apycom.com bahkan tersusun atas menu 4-5 level. Sekarang tinggal bagaimana kita bisa menjadikan kode html tersebut kedalam script php dinamis berbasis database. Saya akan coba memberi solusinya, namun tutorial ini hanya sebatas level 3 saja. Yaitu main menu, child menu, dan grandchild menu.

Langkah 1 :

Buat tabel untuk menyimpan database menu di MYSQL

CREATE TABLE `menu` (
`id` tinyint(3) unsigned NOT NULL auto_increment,
`parent_id` tinyint(3) unsigned NOT NULL default ’0′,
`title` varchar(100) collate latin1_general_ci NOT NULL,
`url` varchar(100) collate latin1_general_ci NOT NULL default ”,
PRIMARY KEY  (`id`)
)

Langkah 2 :

Masukkan source code berikut ke dalam template lokomedia mereplace source code menu sebelumnya

<ul>
<?php
$main=mysql_query(“SELECT * FROM menu WHERE parent_id=0″);

while($r=mysql_fetch_array($main)){
echo “<li><a href=’$r[url]‘><span>$r[title]</span></a>”;
$sub=mysql_query(“SELECT * FROM menu WHERE parent_id=$r[id]“);
$jml=mysql_num_rows($sub);
// apabila sub menu ditemukan
if ($jml > 0){
echo “<div><ul>”;
while($w=mysql_fetch_array($sub)){
echo “<li><a href=’$w[url]‘><span>» $w[title]</span></a>”;
$sub2=mysql_query(“SELECT * FROM menu WHERE parent_id=$w[id]“);
$jml2=mysql_num_rows($sub2);
// apabila submenu 2 ditemukan
if ($jml > 0){
echo “<div><ul>”;
while($x=mysql_fetch_array($sub2)){
echo “<li><a href=’$x[url]‘><span>» $x[title]</span></a></li>”;
}
echo “</ul></div>
</li>”;
}
else {
echo”</li>”;
}
}
echo “</ul></div>
</li>”;
}
else{
echo “</li>”;
}
}
?>
</ul>

Untuk modul manajemen menu pada administrator bisa di download disini. Jangan lupa untuk menambahkan kode di content.php pada folder admin web untuk menampilkan modul menu. Sekarang silakan dicoba menu drop downnya. Semoga bisa jadi solusi.

Advertisement