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); ?> |
Download script ini:
bener bener ajiiiiib … sedot disin ah
pengin nyobo.. nek nggo wordpress bs jg ga ya?
mbok blog ini, nyoba.. ntar tak liat e
jadi jelas ssh nya mo ngapain.. -_-’
-w-
pake wordpress atau yg lain bisa, yg penting struktur html menunya sama (<ul> dan <li> nya)
tak coba ah mas
coba ah
ya coba aja
Wah terima kasih banget nih Mas Bowo, kebetulan saya lagi nyari2 menu seperti ini. Pernah buat tapi ga jalan di IE 6.
wah ini dia yg gw cari2.., selama ini gw baru bisa bikin 2 level menu aja, yang ini unlimited to ga? btw makasih gan atas share nya. keep up da good work
iya ini unlimited
terimakasih bnyak atas artikelnya mas,,,
oya saya mau tanya,bisa jelasin tentang id_parent yang ada di database itu ,terus penomeranya itu gman….??
menu level pertama memiliki parent_id = 0
menu level 2 memiliki parent_id = id menu di atasnya
dst…
contohnya:
menu Products (id = 11, parent_id = 0)
memiliki submenu:
- Hardware
- Software
masing2 memiliki parent_id = 11
11 = id dari menu Products
Thx.
Tapi di IE 6 tampilannya agak rusak:
1. border bawah di menu level 2 kadang muncul kadang hilang
2. saat kursor ditunjuk ke menu level 2 yang mempunyai level 3 tinggi kotaknya bertambah shg tampilan jadi rusak.
terimakasih infonya.. ternyata kemarin saya lupa mencoba di browser tsb hehe
yg nomer 1 saya blm nemu masalahnya..mungkin anda bisa membantu?
yg nomer 2 sudah saya perbaiki di file css nya saya tambahkan ini:
Wow! menu ala facebook
langsung sedot..
terimakasih bos, tutorialnya.
Kerennn abizzzzzzzzzzzz …….. Keep RocKin Mas Bowo … hehehe
muantabbbb… sedoot… thanks tutorialnya buagus
mas thanx sebelumnya atas postingan ini..
sangat bermanfaat bgt..
tapi waktu saya coba, kok ada strip atasnya ya (warna putih….)
jadi menu-nya g bisa mepet ama header website…
tolong bantuin saya dong mas…
apa yang harus di modif di css nya biar bisa mepet ke header…
udah saya coba tapi kok belum berhasil
thanx ya mas
bisa kirim filenya mas? atau kl ada demo yg online lebih bagus lagi, tinggal kirim url nya
tengkyu…..
sedot ahhhh,,,,
mau coba…
asekk… akhirnya nemu menu dropdown multi level,
thanks mas
waaah keren mzzz tutor menu nyaaaaa….
oh iya variable untuk meletakkan atas bawah menu nya dmana yaa tak cari2 varibale “top” nya di css k tidak ada yaa mz?
maklum mzh newbie
Untuk mengatur letak/urutan menunya bukan lewat css mas, tetapi di database nya. Di tabel tsb ada field menu_order yang digunakan untuk urutan menu.
Mas aku newbie niy masalah kaya gini, aku mau tanya kalo script yang mas kasih bisa ga di buat onmouseover jadi tampilannya kalo kita geser ke menu ini maka sub menu akan kelihatan…
Aku tunggu balasannya ya mas…
Bisa saja ditambahi onmouseover, tapi menu tsb sudah bisa menampilkan submenunya saat mouse kita arahkan ke atas menu nya. Tidak perlu ditambahi onmouseover lagi.
wah.. keren-keren mas ari…
btw mas,,. saya ada pertanyaan ni di php
gimana membuat user login di php dan dia hanya boleh akses table user misalnya, dan user kedua bisa hanya bisa membuka table user dan data,
gimana mas buatnya di php?
Thanks
Intinya ya pakai variable
$_SESSIONuntuk menyimpan data login, tapi maaf sepertinya terlalu kompleks scriptnya untuk ditampilkan di sini.hehehhe, boleh kirim ke email donk mas,
ma acih
duh menunya kalo pakai
//yang ini untuk menunya
//yang ini select table database untuk content
rupanya menunya conflic ama kiri.php jadi kalo child menunya kena tulisan file kiri.php yang contentnya dari database juga,menunya langsung ketutup jadi nggak bisa di klik..tapi kalo file kiri.php di gabungkan di div menu menunya jadi normal…
wah mas makasih banyak dng tutornya… bener2 bagus & membantu sekali….
bener2 muaaantep bos… gw simpen ilmunya ya, thanks
terima kaih mas atas ilmunya, tapi bagaimana ya caranya agar menunya muncul ditengah-tengah bukan dikiri, saya coba pakai tabel mau tapi fontnya tambah besar n menunya gak mau ditengah2 table?
mohon bimbingannya
trim’s
Kok Jadi error line 30
kekurangannya apa mas ???
Fatal error: Call to undefined function mysql_tchfe_object() in C:\xampp\htdocs\ajax\index.php on line 30
kok mysql_tchfe_object() ? salah ketik nama fungsinya mungkin mas.. yg bener mysql_fetch_object()
mysql_tchfe_object() <—
mysql_fetch_object()
mas, ada treeview?
load datanya dari mysql
thanks
bos tolong donk di kasih script “nsert into table nya ” ,..thanks
mas kalo menu vertical piye carannya
thanks ilmunya
maaf kl yg menu vertikal saya belum punya contohnya
Wahh… keren bgt mas tutorialnya. Sangat membantu.. thanks ya.
post super
mas , klo di setiap sub menu,saya kasih link, dimana di ubahnya
maaf saya masih pemula
link nya disimpan di database tabel `menu` di field `url`
udah di update menu untuk IE6 nya blm?
jadi biar download ga usah edit lagi hehe..
btw thx udah share
sudah mas..
file css nya sudah diupdate tambahan utk IE6
matur thank you pak lek…..
tengkyu bgt mas ari..
sangat membantu nih..
Wow … mantaaabb bgt Om
makasih y …..
Bagai mana jika saya hanya ingin menapilkan salah satu menu saja? misal menu dari “produk”
saya telah mencoba
$result = mysql_query(“SELECT * FROM menu where parent_id=xxx”);
xxx=parent_id dari “produk”
mau tanya kalau buat linknya gimana ya??
mas sedot yah …. uh mantap
mantap Mas suwun
emang pas lagi nyari php menu cek gak report
suwun
Pak gimana cara buat, kode php pada posting seperti punya anda ada list angka dan kalo bisa yang bisa di print, maklum masih awam
..mantabbbbbbb……
wah hatur nuhun mas……….
saya jd bisa bikin get menu…..
Keren banget, disampaikan dengan bahasa yang
mudah di mengerti, sangat membantu buat saya yang sedang belajar, makasih banyak…
hello…thanks ya
cuman mau tanya nih…untuk masing masing links nya dimana ya? bisa dicontoin ngak?
mas mau tanya ni
while ($row = mysql_fetch_object($result)) {
$data[$row->parent_id][] = $row;
}
klo pake koneksi oci tu gmn ya??
krn sy pake db oracle 8.1.7
$query(“SELECT * FROM menu ORDER BY menu_order”);
$statement = oci_parse ($connection, $query);
oci_execute ($statement);
//echo $query;
while ($row = oci_fetch_object($statement)) {
$data[$row->parent_id][] = $row;
}
pas di run kok kosong ya???
bantuanx pliss…..
wah maaf mas, saya belum pernah pake oracle.. mungkin teman2 yg lain ada yg bisa membantu
thx mas
mungkin temen2 ada yang bisa ga????
mungkin bisa membantu mas: coba menggunakan library abstraksi database, supaya scriptnya sama untuk semua jenis database
kalo saya biasanya menggunakan adodb:
Ijin sedot Mas.
BTW ada referensi belajar buat template dengan css gak Mas??
Oya template menu horizontalnya keren Mas, bisa gak ditambahin file lain seperti, file header, rightcontent, leftcontent, footer, dll
Tolong dibantuin mas(kirim via email ya :D
, saya lagi belajar buat template dgn css.
Thanks you
mas ada yg menu vertikalnya ga???
maaf saya blm punya contohnya mas
agak rumit nih. apa ada yang lebih sederhana untuk wordpress ?
sebenarnya ini bukan khusus utk wordpress, tapi teknik utk website secara umum
infonya bagus, tapi mau tanya apa untuk blogspot bisa bos
dicoba dulu gan script nya
trims
wahhh…
yang di cari² ternyata ada disini.
Mantab bos..
Likes this!!!
mantap, source code dan penjelasannya,.. thanks yah..
keren nih.. bs dipake juga buat yang model tree view..
sangat berguna
mas,,,maw tanya nih…
gmn caranya buat pemberitahuan???
pada PHP..
makasih.
pemberitahuan apa ya mas? maaf pertanyaannya kurang spesifik
trims
Thanks mas Bowo…
Saya udah coba menunya….
Tap kenana muncul
Notice: Undefined index: 1 in C:\\wamp\\www\\jquery\\menu\\index.php on line 5
Notice: Undefined index: 2 in C:\\wamp\\www\\jquery\\menu\\index.php on line 5
dst……….s/d index:23
Makasih atas jawabannya….
Scriptnya sudah saya perbaiki supaya tidak muncul notice.
Silakan didownload lagi.
makasi ya kak, saya benar2 terbantu dengan artikel kakak ini…
nantinya akan saya gunakan untuk bisnis saya di http://habibnurrahman.com/tugupaypal/
ini yang saya cari untuk menu atas, bisa dinamis juga
saya mau tanya nie bozz,
gini, saya mau pasang FadeSlideShow
contohnya ada di http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
itukan ada 3 file bozz.
fadeslideshow.js
index.html
dan
jquery.min.js
saya ada probelm di file “jquery.min.js”
kalo online bisa. tp kalo off line kok gak bisa??
padahal saya sudah copy source codenya.
dan sya simpan difolder yang sama.
saat offline saya pake web server Xampp
mohon bantuannya ya bozz
maa panjang…
Mau tanya asp.net di buka di windows bisa gak sih.. kapan hari q ada script tapi tak buka pake xampp gak bisa..
mohon pencerahannya..