Menu Horizontal Multi Level Menggunakan jQuery & PHP

17 Apr 2009 160,193 views

Drop Down Menu
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:
menu-list

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

Lihat demonya di sini

Download script ini:
jQuery Multi Level Horizontal Menu (17780 downloads)

Tags: , , ,

182 Comments

  1. rifqi says:

    bener bener ajiiiiib … sedot disin ah

  2. WeW says:

    pengin nyobo.. nek nggo wordpress bs jg ga ya?

    mbok blog ini, nyoba.. ntar tak liat e :D

    jadi jelas ssh nya mo ngapain.. -_-‘

    -w-

  3. Danie says:

    tak coba ah mas :D

  4. yayan says:

    Wah terima kasih banget nih Mas Bowo, kebetulan saya lagi nyari2 menu seperti ini. Pernah buat tapi ga jalan di IE 6.

  5. jharrvis says:

    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

  6. amin says:

    terimakasih bnyak atas artikelnya mas,,,
    oya saya mau tanya,bisa jelasin tentang id_parent yang ada di database itu ,terus penomeranya itu gman….??

    • gawibowo says:

      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

  7. irwans says:

    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.

    • gawibowo says:

      terimakasih infonya.. ternyata kemarin saya lupa mencoba di browser tsb hehe
      yg nomer 1 saya blm nemu masalahnya..mungkin anda bisa membantu? :D
      yg nomer 2 sudah saya perbaiki di file css nya saya tambahkan ini:

      * html .jquerycssmenu ul li ul li a {
      	display: inline-block;
      }
  8. Rivai says:

    Wow! menu ala facebook
    langsung sedot..

  9. sleting_dol says:

    terimakasih bos, tutorialnya.

  10. DeLorenzo says:

    Kerennn abizzzzzzzzzzzz …….. Keep RocKin Mas Bowo … hehehe

  11. aji says:

    muantabbbb… sedoot… thanks tutorialnya buagus

  12. codot says:

    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

  13. mariotegoeh says:

    tengkyu…..
    sedot ahhhh,,,,
    mau coba…

  14. Rius says:

    asekk… akhirnya nemu menu dropdown multi level,
    thanks mas :)

  15. basar says:

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

    • gawibowo says:

      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.

  16. newbiebanget says:

    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…

    • gawibowo says:

      Bisa saja ditambahi onmouseover, tapi menu tsb sudah bisa menampilkan submenunya saat mouse kita arahkan ke atas menu nya. Tidak perlu ditambahi onmouseover lagi.

  17. Kuda says:

    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

  18. charisma says:

    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…

    • charisma says:

      oh maaf kalau yang ini dulu rupanya hanya masalah z-index..maklum mas dulu belum terlalu sering utak atik website..oh ya mas sekarang saya ada pertanyaan kalau menghapus sub menu sub menu unlimitednya mas..^,^..sebab saat ini baru berhasil menghapus 1 level sub menu aja..maksudnya kalau di tabel masih ada menu yang parent_id nya sama dengan id_menu ..lalu hapus menu tersebut..nah karena menu nya unlimited pusing juga..oh ya mas kalau mas pernah membuat scriptnya please share mas ya langsung update di blog ini aja..^,^; makasih mas sebelumnya..wassalammu’alaikum wr wb..;

      • charisma says:

        oh ya sorry mas..jangan pusing pusing santai aja ..allhamdulillah untuk sementara saya buat delete sub menu 3 level saja ini scriptnya include_once "config/utk_database.php"; include_once "config/antiinjection.php";
        $idnya = antiinjection($_POST['idnya']);
        $website= antiinjection($_SESSION[folder_website]);
        if (is_numeric($idnya) && $idnya != ''){
        mysql_query("DELETE FROM menu_charisma where website='$website' AND id='$idnya'");
        $checkSub = "SELECT * FROM menu_charisma where parent_id = '$idnya' AND website='$website'";
        $check = mysql_query($checkSub) or die('error');
        if(mysql_num_rows($check) > 0){
        $r=mysql_fetch_array($check);
        $id2=$r['id'];
        mysql_query("DELETE FROM menu_charisma where website='$website' AND parent_id = '$id2' ");
        mysql_query("DELETE FROM menu_charisma where website='$$website' AND parent_id = '$idnya' ");

        $checkSub2 = "SELECT * FROM menu_charisma where parent_id = '$id2' AND website='$website'";
        $check2 = mysql_query($checkSub2) or die('error');
        if(mysql_num_rows($check2) > 0){
        $r2=mysql_fetch_array($check2);
        $id3=$r['id'];
        mysql_query("DELETE FROM menu_charisma where website='$website' AND parent_id = '$id3' ");
        }
        }

        } hmm sudah jam 10:51, saya mau melanjutkan ke fitur yang lain lagi..makasih ya mas ..wassalammu’alaikum wr wb..;

        • charisma says:

          sorry mas..ini script yang sudah benar benar saya test..allhamdulillah berhasil sukses tanpa pusing pusing
          include_once "config/utk_database.php"; include_once "config/antiinjection.php";
          $idnya = antiinjection($_POST['idnya']);
          $website= antiinjection($_SESSION[folder_website]);
          if (is_numeric($idnya) && $idnya != ''){
          mysql_query("DELETE FROM menu_charisma where website='$website' AND id='$idnya'")or die('Sorry Something Was Wrong, Menu Can Not We Delete.');
          $checkSub = "SELECT * FROM menu_charisma where parent_id = '$idnya' AND website='$website'";
          $check = mysql_query($checkSub) or die('Sorry Sub Menu Level 1 Can Not We Detect');
          if(mysql_num_rows($check) > 0){
          $r=mysql_fetch_array($check);
          $id2=$r['id'];
          $checkSub2 = "SELECT * FROM menu_charisma where parent_id = '$id2' AND website='$website'";
          $check2 = mysql_query($checkSub2) or die('Sorry Sub Menu Level 3 Can Not We Detect');
          if(mysql_num_rows($check2) > 0){
          $r2=mysql_fetch_array($check2);
          $id3=$r2['id'];
          mysql_query("DELETE FROM menu_charisma where website='$website' AND parent_id = '$id3' ");
          }
          mysql_query("DELETE FROM menu_charisma where website='$website' AND parent_id = '$id2' ");
          mysql_query("DELETE FROM menu_charisma where website='$website' AND parent_id = '$idnya' ");

          }
          echo"success";
          }

          wassalammu’alaikum wr wb..selamat berkarya terus mas..sukses selalu ..amin..;

  19. Sugix says:

    wah mas makasih banyak dng tutornya… bener2 bagus & membantu sekali….

  20. tooricg says:

    bener2 muaaantep bos… gw simpen ilmunya ya, thanks

  21. gede surya says:

    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

  22. decent says:

    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

  23. test says:

    mysql_tchfe_object() <—
    mysql_fetch_object()

  24. rius says:

    mas, ada treeview?
    load datanya dari mysql

    thanks

  25. sony says:

    bos tolong donk di kasih script “nsert into table nya ” ,..thanks

  26. heru hidayat says:

    mas kalo menu vertical piye carannya
    thanks ilmunya

  27. Gie says:

    Wahh… keren bgt mas tutorialnya. Sangat membantu.. thanks ya.

  28. modd says:

    post super

  29. Eky adhiputra says:

    mas , klo di setiap sub menu,saya kasih link, dimana di ubahnya

    maaf saya masih pemula

  30. ridwan says:

    udah di update menu untuk IE6 nya blm?
    jadi biar download ga usah edit lagi hehe..
    btw thx udah share :)

  31. angga says:

    matur thank you pak lek…..

  32. chaluvdy says:

    tengkyu bgt mas ari..
    sangat membantu nih..

  33. ghprod says:

    Wow … mantaaabb bgt Om :D

    makasih y ….. :)

  34. indra says:

    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”

  35. Fany says:

    mau tanya kalau buat linknya gimana ya??
    :)

  36. ilham says:

    mas sedot yah …. uh mantap

  37. rudy idur says:

    mantap Mas suwun
    emang pas lagi nyari php menu cek gak report :))

    suwun

  38. Abdul Adhim says:

    Pak gimana cara buat, kode php pada posting seperti punya anda ada list angka dan kalo bisa yang bisa di print, maklum masih awam

  39. ewa says:

    ..mantabbbbbbb……

  40. haq says:

    wah hatur nuhun mas……….

    saya jd bisa bikin get menu…..

  41. wanabe rocker says:

    Keren banget, disampaikan dengan bahasa yang
    mudah di mengerti, sangat membantu buat saya yang sedang belajar, makasih banyak…

  42. deden says:

    hello…thanks ya
    cuman mau tanya nih…untuk masing masing links nya dimana ya? bisa dicontoin ngak?

  43. chandra says:

    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

    • chandra says:

      $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…..

      • gawibowo says:

        wah maaf mas, saya belum pernah pake oracle.. mungkin teman2 yg lain ada yg bisa membantu

        • chandra says:

          thx mas

          mungkin temen2 ada yang bisa ga????

          • gawibowo says:

            mungkin bisa membantu mas: coba menggunakan library abstraksi database, supaya scriptnya sama untuk semua jenis database
            kalo saya biasanya menggunakan adodb:

            include('adodb.inc.php'); 
            $db = ADONewConnection($db_type);
            $db->Connect($server, $user, $password, $database); 
             
            $rows = $db->GetAll("SELECT * FROM menu ORDER BY menu_order");
            foreach ($rows as $row) {
            	$data[$row['parent_id']][] = $row;
            }
  44. heroo says:

    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 :&#68;), saya lagi belajar buat template dgn css.
    Thanks you

  45. ache says:

    mas ada yg menu vertikalnya ga???

  46. dekan says:

    agak rumit nih. apa ada yang lebih sederhana untuk wordpress ?

  47. s. wahyudi says:

    infonya bagus, tapi mau tanya apa untuk blogspot bisa bos

  48. azul says:

    dicoba dulu gan script nya :)
    trims

  49. Risanum says:

    wahhh…
    yang di cari² ternyata ada disini.
    Mantab bos..

    Likes this!!!

  50. mantap, source code dan penjelasannya,.. thanks yah..

  51. neng ucrit says:

    keren nih.. bs dipake juga buat yang model tree view.. :)
    sangat berguna

  52. adi says:

    mas,,,maw tanya nih…
    gmn caranya buat pemberitahuan???
    pada PHP..
    makasih.

  53. Multha says:

    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….

  54. Habib says:

    makasi ya kak, saya benar2 terbantu dengan artikel kakak ini…
    nantinya akan saya gunakan untuk bisnis saya di http://habibnurrahman.com/tugupaypal/

  55. ilham says:

    ini yang saya cari untuk menu atas, bisa dinamis juga :D

  56. adi bowo says:

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

  57. 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..

  58. polairut says:

    mohon ijin download ya… trima kasih..

  59. van says:

    ijin sedot mas gan :D..nyoba dulu

  60. Nova says:

    Mas bowo, saya telah mencoba tapi tidak berhasil. Mohon bantuannya, apa yang salah ya mas. Terima kasih

    <li><a href=\’http://tulis_alamat_url_tujuan\’>Akuntansi</a>
    <ul>
    <li><a href=\’http://tulis_alamat_url_tujuan\’>Akuntansi Dasar</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>

  61. ihsanbaihaqi says:

    slam kenal,,,,mas mau tnya,,,klo bikin sub menu dropdown pada sebuah blog bisa ga yh,,,,gmna cara masukin si javanya,,,,
    hm,,,,,dan untuk membuat guestbook menggunakan php,,,untuk menyimpan database sqlnya itu dimna ?
    hehe,,,trima kasih mas,,,,

  62. wakidi says:

    Terima kasih scriptnya…
    Tapi kalau ingin mengubah menjadi vertikal menu bagaimana caranya?
    Trims.

  63. henry says:

    utnuk yang vertical ad g y?coba ubah ke vertical malah ancur terus tampilanny..terima kasih

  64. boypeace says:

    Keren, nich source yang diterapkan pada CMS Lokomedia,
    cuma di cms lokomedia jquery-nya pake superfish.

    Yang menjadi masalahnya pada superfish ini klo di buat sub sub menu mengarahnya ke bawah seharusnya ke kanan.
    yang saya ingin tanyakan, css atau jquery-nya yang menjadikan sub menu bisa ke bawah atau ke kanan?

    coz klo pake superfish theme-nya lebih bagus

  65. boypeace says:

    Ini Ada Sedikit Perubahan Style melalui CSS dan imagenya

    [IMG]http://i647.photobucket.com/albums/uu192/boypeace/menu.png[/IMG]

    Tapi Belum ane terapkan di web ane

  66. rozi says:

    mas mo nanya nich, cara ngutak atik menunya dimana yaa, 1 lagi gimana sich cara ngeling nya

  67. rozi says:

    o ya satu lagi, gimana klo menu nya pake image

  68. rozi says:

    balasannya ke email aj yaa

  69. arief says:

    keren nih sepertinya bisa dibuat untuk menu privelege, keren2

  70. andi hakim says:

    kalau saya pake framework Codeigniter,..
    bagaimanakah caranya memisahkan antara menu.php menjadi MVC,..

  71. mytaufiq says:

    <a href=\"http://www.thebesthandphone.com/\">Mantab tenan iki :D</a>

  72. sue says:

    saya coba code nya tapi error…

    Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 35 bytes) in C:\\Program Files\\Apache Software Foundation\\Apache2.2\\htdocs\\web_avarimark\\application\\modules\\catalog\\controllers\\ProductController.php on line 77

    bantuin dunk…thanks…

    • R. Andi Ramdani says:

      posting code/isi dari ProductController.php on line 77 … ga taw letak problemna…

  73. yusuv says:

    thanks mas referensinya… maknyoss…

  74. wisnu says:

    sep juga tutornya ….
    mas mau tanya untuk menu vertical …

    saya bikin aplikasi perkantoran dan sudah berjalan dengan baik, yang saya herankan kenapa di file log error saya tertulis

    Undefined index: 3
    Undefined index: 5
    Undefined index: 6

    dan seterusnya….

    bagaimana cara untuk mengatasinya, mohon pencerahannya terima kasih.

  75. nugraha says:

    nice info Mas,

    tapi tetep masih kosong kalo di koneksiin ke oracle, listing yang saya gunakan seperti ini.

    $link = oci_connect(\"user\",\"password\",\"database\&quot;);

    $rs=oci_parse($link, $db);

    oci_execute($rs);

    while ($row = oci_fetch_object($rs)) {
    $data[$row->ID_MENU_REF][] = $row;

    }

    $menu = get_menu($data);

    ga ada warning error cuman si menu nya jadi kosong
    ada yang bisa bantu ?

  76. ade says:

    salah ketik codenya thu gan…

  77. enggang says:

    mantap sekalii , klo tampilan nya dijadikan treview bisa g

  78. sarip says:

    Warning: mysql_fetch_object(): supplied argument is not a valid MySQL result resource in C:\\Program Files\\xampp\\htdocs\\index.php on line 30

    kenapa bisa tampil error begini ya??

  79. opal says:

    saya udah coba untuk yang vertical, bisa broo.. email saya aja ya :D

  80. gemblunk says:

    makasih sebelumnya mas, udah dicoba ternyata oke banget deh.
    nah masalahnya sekarang, saya mo bikin halaman pakai dua frame, yg atas sebagai barisan menu, yg bawah menampilkan isi link. sy coba tambah di php-nya

    kok gak mau ya? apa ada pengaturan khusus? atau memang ini hanya untuk satu halaman saja? saya agak malas kl harus menyisipkan ‘include menu.php’ hehehe
    makasih banyak mas

  81. ade says:

    mas <script type=\"text/javascript\" src=\"jquery-1.3.2.min.js\"></script>

    ini yg menjalankan dropdownnya.??

  82. Sen says:

    Terimakasih..

  83. akmal says:

    mas..penjelasan databasenya dong..kurang paham saya angka2 nya..

  84. AllinOne says:

    saya masi kurang paham cara menggunakan Jquery di blogger…

  85. gilang says:

    mas,, itu kan menunya bertingkat ke arah kanan,,
    kalau ke arah kiri bisa ndak ?

  86. maniac says:

    njaluk sithik…..:D

  87. endip pemula says:

    hemm… mas mo tanya neh okelah untuk bisa page parent, tapi gimana mas kalo setelah link ini ketemu dengan page kedua nah biasanya kan menemukan katakanlah (?page=web-design) tapi modelnya berbeda disini menunya menuju (page/web-design) trus gimana mas file php menghubungkannya… terima kasih sebelumnya

  88. detak sunnah says:

    bingung ni mas,

    mau di pasang di blog nggak ngerti langkah-langkahnya, script apa aja yg akan di pasang dan dmn akan di letakkan…. maklum gaptek..

    bantuin ya…. please…

  89. dedy says:

    artikelny bgs mas..

  90. Ratex says:

    maksi banyak sebelumnya mas… artikel yg sangat berguna buat newbie kaya ane nie….

    tapi ane da yg mo di tanya neeh mas… :D supaya link pagenya ga buka di new tab gmn ya??…jadi pas di klick menu profile misalnyya…nah si page profile tuh masi tetep di page itu tanpa rus loncat ke tab yg baru…maksi bnyak sebelumnya

  91. albert says:

    keren nih tutor nya…
    thanks y,…
    sangat membantu…

  92. mocorono says:

    God Bless You, Sir.. :)

  93. anto says:

    Gan kalo menu macam ini untuk di JSP ada gak?

  94. S&Y says:

    Mas bro,

    Please help ada error berikut:
    Notice: Undefined property: stdClass::$id in C:\xampp\htdocs\jquery-menu\index.php on line 9

    Mohon petunjuknya yaw.
    Thanks.

  95. S&Y says:

    Sorry mas bro,
    Sudah solve.
    Ternyata case sensitif antara nama field table dengan script di index.php untuk $v->id.

    Terus berkarya, mas.
    Thanks.

  96. aries says:

    save save save.. makaccciiihhh :)

  97. Ardi says:

    Mantaaaaap ..

  98. Shogi says:

    Mas nie pake IE berapaya? lao punya ku kyak ya IE 5 . kyaknya g suport gman nie?? maksih sblumnya

  99. sigit prasetyo says:

    mas saya coba download…setelah saya coba kok ada error nya ya
    berikut errornya

    \"; $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(\’sad\’); $result = mysql_query(\"SELECT * FROM menu ORDER BY menu_order\&quot;); while ($row = mysql_fetch_object($result)) { $data[$row->parent_id][] = $row; } $menu = get_menu($data); ?>

    mohon petunjuknya

  100. daud says:

    wah, tutorialnya bagus banget mas.. jadi inspirasi bagi saya untuk buat artikel lagi di web saya AplikasiPHP.com

    thanks buat ilmunya mas

  101. Irawan says:

    maaf mas mau nanya, kalo kategori utama url na dimatikan apabila dia punya parent_id,bagaimana ya mas. Misal gini mas, itu kan ada menu “Projects”. dimana parent_id nya
    “PHP”
    “AJAX”
    “JAVA”
    “ASP.Net”
    nah, bagaimana projects itu tidak bisa dklik, yang hanya bisa diklik menuju url “PHP”, “AJAX”, “JAVA”, “ASP.Net”

  102. Djiextray says:

    wah terima kasih mas atas postingannya … sangat membantu buat saya

  103. anang says:

    nah ini nih yang ane cari selama ini
    mau tanya mas

    gimana cara bikin file file nya?
    khan misalnya nih di klik “Home” dia bakal masuk ke “localhost/belajar/home

    sedangkan isi dari file “home” sendiri dari file “home.php”

    mohon bimbingannya

  104. Edi Sujono says:

    Mas Ari,
    Terima kasih artikelnya nih… saya mau coba ah… siapa tahu bisa. Hehehehe….

    Semoga sukses selalu.

  105. Hand Right says:

    Terima kasih kk….

  106. andiek kwn says:

    konsep manajemen menu yg menarik…
    trims…
    sukses slalu…

  107. klo untuk blogspot gmn gan??

  108. arief says:

    Wah mantaps nich, ijin sedot mas..ini br nemu yg mantaps seperti ini,
    mau tanya mas masih newbie kalo dari menu Home kita buat linknya ke isi dari home gimana ya.terimakasih.kalau kirim ke email boleh juga mas.

  109. arief says:

    Wah mantaps nich tutorialnya,ijin sedot mas.
    mas, newbie mau tanya nich gimana cara membuat linknya?contoh dari menu Home kita buat linknya ke home gt.terimakasih..

  110. Mega says:

    Warning: mysql_fetch_object(): supplied argument is not a valid MySQL result resource in C:\\\\xampp\\\\htdocs\\\\menu\\\\index.php on line 30

    pas saya jalankan menu dimisnya ada pesan error !

    mohon dibantu ;( *_*

  111. arief says:

    Mohn bantuannya gan, untuk buat linknya gimana.terimakasih.

  112. Dedi says:

    keren bngt nih tutorialnya…saya sudah coba menunya yg saya mau tanyakan kalau membuat menu yang ada class=”dir” contohnya Mens karna itu ada 2…gmn kode penambahan disninya gan.mohon pencerahannya.tq

    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 .= ‘url.'”>’.$v->title.’‘;
    if ($child) {
    $i–;
    $html .= $child;
    $html .= “\n\t$tab”;
    }
    $html .= ”;
    }
    $html .= “\n$tab”;

    contoh menunya
    About Us
    Mens

    Citizen

    AK Anne Klein
    Alexander Christie
    Arbutus
    Armitron
    Body Glove
    Calvin Klein

  113. edi says:

    ini nih yang ane butuhin, ijin sedot ahh

  114. stefanus says:

    mas maksud dari id dan parent id itu gmn? trus gmn konsep pemakaian id dan parent id untuk lv 1,lv2,lv3 dst terima kasih

  115. h-lead says:

    Salam kenal Bang…

    kalau untuk form manager menunya pakai css gimana mas…( edit, tambah, & hapus menu) ….

  116. Afif says:

    Gan..
    Aku nyoba untuk diterapkan di codeigniter dengan browser mozilla firefox nightly 21.0a1 (2013-01-31). Dan hasilnya berantakan. Sub menunya tidak tepat di bawah menu utama, tapi berjarak cukuup jauh.

    Aku coba di ie 9, bisa. oh ya, ak pake windows 8 64 bit.

  117. baru_belajar says:

    mas ari gimana kalo sudah klik submenu nya hasilnya muncul di bawah menunya jadi menu nya tetap ada diatas, maksudnya nanti kalo mau pilih menu yg lain ga perlu pake tombol <— BACK,
    ada contohnya ga?

    Terima Kasih sebelumnya

  118. alam says:

    boleh coba ya mas, makasih…

  119. veri adhi pratama says:

    mas saya mau tanya
    cara buat sub kategori produk diwebnya caranya gmn ya?
    kalo di adminnya saya sudah bisa tp untuk di tampilan webnya saya masih kesulitan dalam pemanggilan subkategori produk

  120. veri adhi pratama says:

    mas saya mau tanya kalo untuk modul dihalaman adminnya gimana ya

  121. mochammad kamaluddin says:

    Assalamualaikum para master web.
    mohon bantuannya.
    saya mempunyai masalah sbb:
    \"ingin menampilkan menu dinamis pada top menu website saya, masalahnya adalah website saya menggunakan template hasil donwload yang mana css-nya sudah ada, ketika saya memasang coding menu dinamis yang saya ambil dari database(tutorial coding dari buku SIA lokomedia yg sudah saya modifikasi, maka menu yang tampil hanya satu saja, yaitu menu DEPAN \"menu yang lain pada database tidak muncul\" )\"
    berikut saya sertakan kodingnya, untuk bantuan saya mohon direply atau kirim email ya ke mochammad.kamaluddin@ymail.com
    trims.

    koding:

    <?php
    error_reporting(0);
    ob_start();
    session_start();
    include(\"koneksi/koneksi.php\&quot;);
    ?>
    <!DOCTYPE html>
    <html lang=\"en\">
    <head>
    <title>LAPSOMA | Sistem Informasi Penilaian Rapot</title>
    <meta charset=\"utf-8\">
    <meta name=\"description\" content=\"Place your description here\">
    <meta name=\"keywords\" content=\"put, your, keyword, here\">
    <meta name=\"author\" content=\"Templates.com – website templates provider\">
    <link rel=\"stylesheet\" href=\"css/reset.css\" type=\"text/css\" media=\"all\">
    <link rel=\"stylesheet\" href=\"css/style.css\" type=\"text/css\" media=\"all\">
    <script type=\"text/javascript\" src=\"js/jquery-1.4.2.min.js\" ></script>
    <script type=\"text/javascript\" src=\"js/cufon-yui.js\"></script>
    <script type=\"text/javascript\" src=\"js/cufon-replace.js\"></script>
    <script type=\"text/javascript\" src=\"js/Myriad_Pro_300.font.js\"></script>
    <script type=\"text/javascript\" src=\"js/Myriad_Pro_400.font.js\"></script>
    <script type=\"text/javascript\" src=\"js/script.js\"></script>
    <script type=\"text/javascript\" src=\"js/superfish.js\"> </script>
    <script type=\"text/javascript\">
    $(document).ready(function(){
    $(\’ul.nav\’).superfish();
    });
    </script>
    <style type=\"text/css\"></style>
    <!–[if lt IE 7]>
    <link rel=\"stylesheet\" href=\"css/ie/ie6.css\" type=\"text/css\" media=\"screen\">
    <script type=\"text/javascript\" src=\"js/ie_png.js\"></script>
    <script type=\"text/javascript\">
    ie_png.fix(\’.png, footer, header nav ul li a, .nav-bg, .list li img\’);
    </script>
    <![endif]–>
    <!–[if lt IE 9]>
    <script type=\"text/javascript\" src=\"js/html5.js\"></script>
    <![endif]–>
    </head>
    <body>
    <div class=\"wrap\">
    <!– header –>
    <header>

    <div class=\"container\">
    <nav>
    <ul>
    <?php
    function get_menu($data, $parent = 0){
    static $i=1;
    $tab = str_repeat(\" \", $i);
    if ($data[$parent]){
    $html = \"$tab<ul class=\’container\’>\";
    $i++;
    foreach ($data[$parent] as $v) {
    $child = get_menu($data, $v->id);
    $html .= \"$tab<li>\";
    $html .= \'<a href=\"\’.$v->url.\’\">\’.$v->judul.\'</a>\’;
    if ($child) {
    $i–;
    $html .= $child;
    $html .= $tab;
    }
    $html .= \"$tab</ul>\";
    return $html;
    }
    }
    else {
    return false;
    }
    }
    $result = mysql_query(\"SELECT * FROM dropdownawal ORDER BY menu_order\&quot;);
    while ($row = mysql_fetch_object($result)) {
    $data[$row->parent_id] [] = $row;
    }
    $menu = get_menu($data);
    echo \"$menu\";
    ?>
    <!–<li class=\’current\’><a></a></li>
    <li><a href=\"index.html\" class=\"m1\">Home Page</a></li>
    <li class=\"current\"><a href=\"about-us.html\" class=\"m2\">About Us</a></li>
    <li><a href=\"articles.html\" class=\"m3\">Our Articles</a></li>
    <!–<li><a href=\"contact-us.html\" class=\"m4\">Contact Us</a></li>
    <li class=\"last\"><a href=\"sitemap.html\" class=\"m5\">Site Map</a></li>–>
    </ul>
    </nav>
    </div>

    </header>
    <div class=\"container\">
    <!– aside –>
    <aside>
    <h3>Menu Utama</h3>
    <table class=\"menuleft\">
    <?php
    $menu=mysql_query(\"SELECT * FROM menuawalleft WHERE aktif=\’Y\’ ORDER BY id_menu\&quot;);
    while ($data=mysql_fetch_array($menu)) {
    echo \"<tr><td><a href=$data[link]> $data[nama]</a></td></tr>\";
    }
    ?>
    </table>
    </aside>
    <!– content –>
    <section id=\"content\">
    <div id=\"banner\">
    <h2>Sistem Informasi <span>Penilaian Rapot <span>Labsoma Nurul Fata</span></span></h2>
    </div><div class=\"ic\">More Website Templates at TemplateMonster.com!</div>
    <div class=\"inside\">
    <?php include \"tengah.php\";?>
    </div>
    </section>
    </div>
    </div>
    <!– footer –>
    <footer>
    <div class=\"container\">
    <div class=\"inside\">
    <div class=\"wrapper\">
    <div class=\"fleft\">24/7 Customer Service <span>8.800.146.56.7</span></div>
    <div class=\"aligncenter\"><a rel=\"nofollow\" href=\"http://www.templatemonster.com\" class=\"new_window\">Website template</a> designed by TemplateMonster.com<br>
    <a href=\"http://www.templates.com/product/3d-models/\" class=\"new_window\">3D Models</a> provided by Templates.com</div>
    </div>
    </div>
    </div>
    </footer>
    <script type=\"text/javascript\"> Cufon.now(); </script>
    </body>
    </html>

  122. Mus Koto says:

    Assalamu alaikum,
    Ini luar biasa, smoga sukses selalu buat mas Bowo! Izinkan sy sedot utk dipelajari!
    Wassalam,

  123. Astral27 says:

    Makasih Sob.. :)
    Saya sudah dapat gambaran gimana caranya bikin navigasi dan submenunya dengan database..

  124. dimas says:

    izin sedot mas :)

  125. Rina says:

    bagus sekali idenya untuk membuat menu horizontal yang dinamis dengan bantuan mysql database, sebelumnya saya belum pernah terfikir membuat semacam ini
    sangat bermanfaat, terima kasih ya dan salam kenal :)

  126. rahmat says:

    Notice: Undefined variable: data in C:\\\\xampp\\\\htdocs\\\\x\\\\index.php on line 34

  127. Jogja says:

    Update terus webnya agar terus bermanfaat bagi siapa saja yang membacanya.

  128. My sister advised I’d personally quite possibly like this web page. He / she once was fully correct. This organize actually designed this evening jasa website murah. An individual cann’t believe just how the lot moment I had created put in for this info! Thanks a lot!

  129. Wah Saya mampir kemari karena ucapan terimakasih dari lukman hakim (penerbit bukulokolmedia.com ) dalam bukunya akhirnya saya coba sendiri untuk berkunjung biar dapet penjelasannya
    terimakasih pak wibowo

  130. info yang bagus dan bermanfaat…

  131. saya sudah coba dan hasilnya bagus , sukses (y)

  132. muhamad ridwan sopian says:

    kalo pake database oracle gmna ya mas?

  133. cak erno says:

    untuk script yang di berikan dari link download ada muncul pesan
    Notice: Undefined variable: data in C:\\xampp\\htdocs\\jquery\\index.php on line 34

    untuk script cuma di ubah setingan databasenya aja. mohon bantuannya

  134. klo liat koding php bikin puyeng gan,,, hehehe tp gpp, buat belajar koding. salam kenal gan

  135. humam says:

    mas, klo menunya vertikal gimana mas?

  136. klo liat koding php bikin puyeng gan,,, hehehe tp gpp, buat belajar koding. salam kenal gan

  137. Isinya bermanfaat gan. lanjutkan ya gan.

  138. andini says:

    waow..kerennya,artikelnya sangat membantu, bisa belajar jquery dengan mudah
    jquery

  139. Jeje says:

    Nyari-nyari tenyata nemu juga yang ini. Thanks om

  140. Recomended. Keep posting gan

  141. AKBAR WIGUNA says:

    Banyak sekali artikel anda yg sangat bermanfaat saya senang sekali membacanya penuh Dengan wawasan ????

  142. Iwan says:

    Klo yang untuk bootstrap ada ngak yg model sprt ini?

  143. error code says:

    sambala anjir

  144. sangat bermanfaat saya senang sekali membacanya
    Franchise kopi

Leave a Reply

Your email address will not be published. Required fields are marked *