Recursively print a menu in JavaScript

Dynamically print a menu using recursive JavaScript method call.

view plaincopy to clipboardprint?
  1. <html>  
  2. <head>  
  3. <title>Dynamic Menu - codesstore.blogspot.com</title>  
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>   
  5. <script type="text/javascript">  
  6.     
  7. var menuItems = {  
  8.     "menu-0": {  
  9.         "id": "menu-0",  
  10.         "title": "Home",  
  11.         "parentId": null,  
  12.         "childCount": 0  
  13.     },  
  14.     "menu-1": {  
  15.         "id": "menu-1",  
  16.         "title": "About",  
  17.         "parentId": null,  
  18.         "childCount": 2  
  19.     },  
  20.     "menu-3": {  
  21.         "id": "menu-3",  
  22.         "title": "About Sub1",  
  23.         "parentId": "menu-1",  
  24.         "childCount": 2  
  25.     },  
  26.     "menu-5": {  
  27.         "id": "menu-5",  
  28.         "title": "About Sub2",  
  29.         "parentId": "menu-1",  
  30.         "childCount": 0  
  31.     },  
  32.     "menu-4": {  
  33.         "id": "menu-4",  
  34.         "title": "About Sub1 sub1",  
  35.         "parentId": "menu-3",  
  36.         "childCount": 0  
  37.     },  
  38.     "menu-6": {  
  39.         "id": "menu-6",  
  40.         "title": "Contact",  
  41.         "parentId": null,  
  42.         "childCount": 2  
  43.     },  
  44.     "menu-7": {  
  45.         "id": "menu-7",  
  46.         "title": "Contact sub1",  
  47.         "parentId": "menu-6",  
  48.         "childCount": 0  
  49.     },  
  50.     "menu-8": {  
  51.         "id": "menu-8",  
  52.         "title": "Contact sub2",  
  53.         "parentId": "menu-6",  
  54.         "childCount": 1  
  55.     },  
  56.     "menu-9": {  
  57.         "id": "menu-9",  
  58.         "title": "Contact sub2 sub1",  
  59.         "parentId": "menu-8",  
  60.         "childCount": 0  
  61.     },  
  62.  "menu-10": {  
  63.         "id": "menu-10",  
  64.         "title": "About Sub1 sub2",  
  65.         "parentId": "menu-3",  
  66.         "childCount": 2  
  67.     },  
  68.  "menu-11": {  
  69.         "id": "menu-11",  
  70.         "title": "About Sub1 sub2 sub1",  
  71.         "parentId": "menu-10",  
  72.         "childCount": 0  
  73.     }  
  74.  ,  
  75.  "menu-12": {  
  76.         "id": "menu-11",  
  77.         "title": "About Sub1 sub2 sub2",  
  78.         "parentId": "menu-10",  
  79.         "childCount": 0  
  80.     }  
  81. };  
  82.   
  83.   
  84.   
  85. $(document).ready(function () {  
  86.   
  87.     var htmlTxt = "";  
  88.     var cat = [];  
  89.     var htmlStrTxt = "";  
  90.   
  91.   
  92.     function recurseMenu(parent, level) {  
  93.         htmlStrTxt = '<ul>';  
  94.         for (var x in menuItems) {  
  95.             if (menuItems[x].parentId == parent) {  
  96.                 htmlStrTxt += '<li><span class="level-' + level + '">' + menuItems[x].title + '</span>';  
  97.                  
  98.                 if (menuItems[x].childCount > 0) {  
  99.                     htmlStrTxt += recurseMenu(menuItems[x].id, level + 1);  
  100.                 }  
  101.                 htmlStrTxt += '</li>';  
  102.             }  
  103.         }  
  104.         return htmlStrTxt + '</ul>';  
  105.     }  
  106.   
  107.     var htmlTxt = recurseMenu(null, 0);  
  108.     $("#menu").html(htmlTxt);  
  109.   
  110.   
  111. });  
  112.   
  113. </script>  
  114. </head>  
  115. <body>  
  116.   
  117. <div id="menu">  
  118.  </div>  
  119. </body>  
  120. </html>  
Output:

  Wednesday, July 10, 2013
Labels: ,

2 comments:

Subscribe to: Post Comments (Atom)