Create the menu and sub menu using jquery

Question

What I want is to loop the data from database and create the menu, if each content of the menu have the sub menu, then it will show the sub menu as :

<ul>
<li>test1</li>
<li>test2</li>
<li>test3
    <ul>
       <li>sub menu1</li>
       <li>sub menu2</li>
    </ul>
</li>
</ul>

I create the menu with the Jquery as below :

$(document).ready(function () {
 $.getJSON(url, function (data) {
    $.each(data, function (index, dataOption) {
        $("#navmenu-v").append("<li id='testList'>
            <a href='javascript:void(0);' id='" + dataOption.ID + "'>" +
                    dataOption.Name + "</a>");
            if (dataOption.NumCat > 0) { //NumCat is the amount of sub menu
              $("#testList").append("<ul><li><a>Testing cate</a></li></ul>");
            }
        $("#navmenu-v").append("</li>");
    });
  });
  });

  <div id="content">
     <ul id='navmenu-v'>

     </ul>
   </div>

But the "Testing cate" shows only in the first list of the menu.

Could anyone tell me how to do that please. Thanks so much.

Have a look at this stackoverflow.com/questions/6034960/…

titi
– titi

2012-03-19 03:26:59 +00:00
Commented Mar 19, 2012 at 3:26 — titi
– titi, Commented Mar 19, 2012 at 3:26

Thulasiram · Accepted Answer · 2012-04-19 10:38:05Z

<!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>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [{ 'ID': 1, 'Name': 'A', 'NumCat': [{ 'ID': 1, 'Name': 'a' }, { 'ID': 2, 'Name': 'b' }, { 'ID': 3, 'Name': 'c'}] }, { 'ID': 2, 'Name': 'B', 'NumCat': [{ 'ID': 1, 'Name': 's'}] }, { 'ID': 3, 'Name': 'C', 'NumCat': [{ 'ID': 8, 'Name': 'r' }, { 'ID': 9, 'Name': 'y'}] }, { 'ID': 4, 'Name': 'D', 'NumCat': []}];

            if (data.length > 0) {
                $('#content').append('<ul id="navmenu-v"></ul>');

                $.each(data, function (index, dataMenu) {
                    var stringBuilder = [];
                    stringBuilder.push('<li class="testList"><a href="javascript:void(0);" id="' + dataMenu.ID + '">' + dataMenu.Name + '</a>');

                    if (dataMenu.NumCat.length > 0) { //NumCat is the amount of sub menu
                        stringBuilder.push('<ul>');
                        $.each(dataMenu.NumCat, function (i, dataSubmenu) {
                            stringBuilder.push('<li><a>' + dataSubmenu.Name + '</a></li>');
                        });
                        stringBuilder.push('</ul>');
                    }

                    stringBuilder.push('</li>');

                    $('#navmenu-v').append(stringBuilder.join(''));
                });
            }



            // Or ( Above is for testing... )


            //            var url="/home/getmenulist"; // give u r url path here.

            //            $.getJSON(url, function (data) {
            //                if (data.length > 0) {
            //                    $('#content').append('<ul id="navmenu-v"></ul>');

            //                    $.each(data, function (index, dataMenu) {
            //                        var stringBuilder = [];
            //                        stringBuilder.push('<li class="testList"><a href="javascript:void(0);" id="' + dataMenu.ID + '">' + dataMenu.Name + '</a>');

            //                        if (dataMenu.NumCat.length > 0) { //NumCat is the amount of sub menu
            //                            stringBuilder.push('<ul>');
            //                            $.each(dataMenu.NumCat, function (i, dataSubmenu) {
            //                                stringBuilder.push('<li><a>' + dataSubmenu.Name + '</a></li>');
            //                            });
            //                            stringBuilder.push('</ul>');
            //                        }

            //                        stringBuilder.push('</li>');

            //                        $('#navmenu-v').append(stringBuilder.join(''));
            //                    });
            //                }
            //            });
        });
    </script>
</head>
<body>
    <div id="content">
    </div>
</body>
</html>

in jquery uncommented code is for testing purpose only. when u impliment comment or delete it.
Output will be like this: <ul> <li class="testList"><a href="javascript:void(0);" id="1">test1</a> </li> <li class="testList"><a href="javascript:void(0);" id="2">test2</a> </li> <li class="testList"><a href="javascript:void(0);" id="3">test3</a> <ul> <li>sub menu1</li> <li>sub menu2</li> </ul> </li> </ul>

Collectives™ on Stack Overflow

Create the menu and sub menu using jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest