JAVASCRIPT MENU: Implement a navigation menu using CSS and javascript with JSON.

Question

JAVASCRIPT MENU:
Implement a navigation menu using CSS and javascript with JSON. JSON will define the structure of the menu. The menu will reside in a knav section. CSS will be responsible for the presentation of the menu. JSON menu example a menu item name Home link index.html submenu. null H" item name Item 1 link "item 1.html", submenu H" "Subitem 1 link item 1 subitem 1 html itemname submenu null H" itemname Subitem link item 1 subitem2 html submenu null), t" itemname Subitem link item 1/subitem3 html" submenu null) H" item name Item link item2. html submenu t" it emname Subitem 1", link item subitem html submenu null) H" itemname Subitem link it em2/subitem2.html submenu null), H" itemname Subitem link item subitem 3. html", 16 submenu null H" item name Item link item3. index submenu H" itemname Subitem 1 link item 3 subitem 1.html submenu null H" Subitem link item3/subitem2. html", itemname submenu null One possible HTML menu result Kul id menu.

Explanation / Answer

There are two parts to this question :-
1). Preparing JS array from json
2). Preparing HTML,CSS menu from JS array

1).
var buildmenu = function () {
var source = [];
   var menuitems = [];
   var submenuitem = [];
// build hierarchical source.
for (i = 0; i < menu.length; i++) {
var item = menu[i];
var itemn = item["itemname"];
var lnk = item["link"];
var subm = item["submenu"];
      
       submenuitem = [];
if (subm != null) {
           for (j = 0; j < subm.length; j++) {
           var subitem = subm[j];
               submenuitem[j] = { itemname: subitem["itemname"], link: subitem["link"], subm: subitem["submenu"] };
           }
}
      
menuitems[i] = { itemname: itemn, link: lnk, subm: submenuitem };
       source[i] = menuitems[i];
}
return source;
}
var source = buildmenu();

2).
var buildUL = function (parent, items) {
   for (i = 0; i < items.length; i++) {
       var itemThis = items[i];
       var menuli = $("<li>" + itemThis.itemname + "</li>");
       link = document.createElement('a');
       link.setAttribute('href', itemThis.link);
       menuli.appendChild(link);
       menuli.appendTo(parent);
      
       if(itemThis.submenu != null)
       {
           var ul = $("<ul></ul>");
ul.appendTo(menuli);
buildUL(ul, itemThis.submenu);
       }
   }
}
var ul = $("<ul></ul>");
ul.appendTo("#menu");
buildUL(ul, source);

Related Questions

Navigate

• Browse (All)
• Browse J
• Subjects

---

---

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.