Menu
I'm trying to create a nested UL from JSON. I am able to loop through and grab the data from the object, but I am having trouble building the nested UL. I figure the '.append' method is placed in the wrong spot. The resulting LIs are all grouped together. How do I create a loop (or another way is fine too) that will build the UL with the submenu LIs properly nested? I've tried using other similar posts to solve my issue, but I can't seem to make it make sense with my data and code. A little braindead from this - I've tried a few methods to create this dynamic list and so far none has been successful. Any help would be appreciated :)
My JSON data is nested 3 levels deep. I need to create a menu with submenus from it....
The data:
var menu =
[
{
title: "Best Known For",
menuCaption: "Best Known For Caption",
url: "/best-known-for",
menu: [
{
title: "Acting",
menuCaption: "Acting",
url: "",
menu: [
{
title: "Stage",
url: "/"
},
{
title: "Screen",
url: "/"
},
{
title: "Acting Three",
url: "/"
},
{
title: "Acting Four",
url: "/"
},
{
title: "Acting Five",
url: "/"
},
{
title: "Acting Six",
url: "/"
}
]
},
{
title: "Singing",
menuCaption: "Singing",
url: "",
menu: [
{
title: "Jazz",
url: "/"
},
{
title: "Pop",
url: "/"
},
{
title: "Rock",
url: "/"
},
{
title: "Latin",
url: "/"
},
{
title: "Singing Five",
url: "/"
},
{
title: "Singing Six",
url: "/"
}
]
},
{
title: "Directing",
menuCaption: "Directing",
url: "",
menu: [
{
title: "Television",
url: "/"
},
{
title: "Stage",
url: "/"
},
{
title: "Screen",
url: "/"
},
{
title: "Award Winners",
url: "/"
},
{
title: "Directing Five",
url: "/"
},
{
title: "Directing Six",
url: "/"
}
]
},
{
title: "Politics",
menuCaption: "Politics",
url: "",
menu: [
{
title: "Presidents",
url: "/"
},
{
title: "Senators",
url: "/"
},
{
title: "House Of Representatives",
url: "/"
},
{
title: "Governors",
url: "/"
},
{
title: "Mayors",
url: "/"
},
{
title: "Other Notables in Government",
url: "/"
}
]
}
]
},{
title: "Life Events",
menuCaption: "Choose a life Event",
url: "/life-events",
menu: [
{
title: "Arrested",
menuCaption: "Arrested",
url: "",
menu: [
{
title: "Drug Possession",
url: "/"
},
{
title: "Prostitution",
url: "/"
},
{
title: "Tax Evasion",
url: "/"
},
{
title: "Murder",
url: "/"
},
{
title: "Rape",
url: "/"
},
{
title: "Grand Theft",
url: "/"
}
]
},
{
title: "Awards",
menuCaption: "Awards",
url: "",
menu: [
{
title: "Academy Award",
url: "/"
},
{
title: "Tony",
url: "/"
},
{
title: "People's Choice",
url: "/"
},
{
title: "Emmy",
url: "/"
},
{
title: "Sag Award",
url: "/"
},
{
title: "Lifetime Achievement",
url: "/"
}
]
},
{
title: "Charity Work",
menuCaption: "Charity Work",
url: "",
menu: [
{
title: "HIV/Aids",
url: "/"
},
{
title: "Cerebral Palsy",
url: "/"
},
{
title: "Spinal Cord Injury",
url: "/"
},
{
title: "Breast Cancer",
url: "/"
},
{
title: "Homelessness",
url: "/"
},
{
title: "Orphans",
url: "/"
}
]
},
{
title: "Crime Victim",
menuCaption: "Crime Victim",
url: "",
menu: [
{
title: "Rape",
url: "/"
},
{
title: "Murder",
url: "/"
},
{
title: "Home Invasion",
url: "/"
},
{
title: "Assault",
url: "/"
},
{
title: "Identity Fraud",
url: "/"
},
{
title: "Some Other Crime",
url: "/"
}
]
},
{
title: "Death",
menuCaption: "Death",
url: "",
menu: [
{
title: "Suicide",
url: "/"
},
{
title: "Homocide",
url: "/"
},
{
title: "Cancer",
url: "/"
},
{
title: "Accident",
url: "/"
},
{
title: "Heart Attack",
url: "/"
},
{
title: "Stroke",
url: "/"
}
]
},
{
title: "Disappeared",
menuCaption: "Disappeared",
url: "",
menu: [
{
title: "Disappeared One",
url: "/"
},
{
title: "Disappeared Two",
url: "/"
},
{
title: "Disappeared Three",
url: "/"
},
{
title: "Disappeared Four",
url: "/"
},
{
title: "Disappeared Five",
url: "/"
},
{
title: "Disappeared Six",
url: "/"
}
]
},
{
title: "Discovery",
menuCaption: "Discovery",
url: "",
menu: [
{
title: "New Land",
url: "/"
},
{
title: "New Medicine",
url: "/"
},
{
title: "New Species",
url: "/"
},
{
title: "New Planet",
url: "/"
},
{
title: "New Star",
url: "/"
},
{
title: "New Something Else",
url: "/"
}
]
},
{
title: "Divorced",
menuCaption: "Divorced",
url: "",
menu: [
{
title: "Divorced One",
url: "/"
},
{
title: "Divorced Two",
url: "/"
},
{
title: "Divorced Three",
url: "/"
},
{
title: "Divorced Four",
url: "/"
},
{
title: "Divorced Five",
url: "/"
},
{
title: "Divorced Six",
url: "/"
}
]
},
{
title: "Fame",
menuCaption: "Fame",
url: "",
menu: [
{
title: "Singing",
url: "/"
},
{
title: "Dancing",
url: "/"
},
{
title: "Acting",
url: "/"
},
{
title: "Politics",
url: "/"
},
{
title: "Activist",
url: "/"
},
{
title: "Infamous",
url: "/"
}
]
},
{
title: "Heroic Act",
menuCaption: "Heroic Act",
url: "",
menu: [
{
title: "Heroic Act One",
url: "/"
},
{
title: "Heroic Act Two",
url: "/"
},
{
title: "Heroic Act Three",
url: "/"
},
{
title: "Heroic Act Four",
url: "/"
},
{
title: "Heroic Act Five",
url: "/"
},
{
title: "Heroic Act Six",
url: "/"
}
]
},
{
title: "Illness",
menuCaption: "Illness",
url: "",
menu: [
{
title: "Cancer",
url: "/"
},
{
title: "HIV/Aids",
url: "/"
},
{
title: "Schizophrenia",
url: "/"
},
{
title: "OCD",
url: "/"
},
{
title: "Anorexia/Bulimia",
url: "/"
},
{
title: "Multiple Sclerosis",
url: "/"
}
]
},
{
title: "Incarcerated",
menuCaption: "Incarcerated",
url: "",
menu: [
{
title: "Incarcerated One",
url: "/"
},
{
title: "Incarcerated Two",
url: "/"
},
{
title: "Incarcerated Three",
url: "/"
},
{
title: "Incarcerated Four",
url: "/"
},
{
title: "Incarcerated Five",
url: "/"
},
{
title: "Incarcerated Six",
url: "/"
}
]
},
{
title: "Killed",
menuCaption: "Killed",
url: "",
menu: [
{
title: "Shot",
url: "/"
},
{
title: "Stabbed",
url: "/"
},
{
title: "Beaten",
url: "/"
},
{
title: "Suicide",
url: "/"
},
{
title: "Strangled",
url: "/"
},
{
title: "Accident",
url: "/"
}
]
},
{
title: "Kidnapped",
menuCaption: "Kidnapped",
url: "",
menu: [
{
title: "Kidnapped One",
url: "/"
},
{
title: "Kidnapped Two",
url: "/"
},
{
title: "Kidnapped Three",
url: "/"
},
{
title: "Kidnapped Four",
url: "/"
},
{
title: "Kidnapped Five",
url: "/"
},
{
title: "Kidnapped Six",
url: "/"
}
]
},
{
title: "Military Service",
menuCaption: "Military Service",
url: "",
menu: [
{
title: "Army",
url: "/"
},
{
title: "Navy",
url: "/"
},
{
title: "Air Force",
url: "/"
},
{
title: "Marines",
url: "/"
},
{
title: "National Guard",
url: "/"
},
{
title: "Coast Guard",
url: "/"
}
]
},
{
title: "Parenthood",
menuCaption: "Parenthood",
url: "",
menu: [
{
title: "Adoption",
url: "/"
},
{
title: "Surrogacy",
url: "/"
},
{
title: "Multiples/Twins",
url: "/"
},
{
title: "Mothers",
url: "/"
},
{
title: "Fathers",
url: "/"
},
{
title: "Odd Baby Names",
url: "/"
}
]
},
{
title: "Product Launch",
menuCaption: "Product Launch",
url: "",
menu: [
{
title: "Fashion",
url: "/"
},
{
title: "Food",
url: "/"
},
{
title: "Technology",
url: "/"
},
{
title: "Automotive",
url: "/"
},
{
title: "Architecture",
url: "/"
},
{
title: "Product Launch Six",
url: "/"
}
]
},
{
title: "Scandal",
menuCaption: "Scandal",
url: "",
menu: [
{
title: "Sex Tape",
url: "/"
},
{
title: "Domestic Violence",
url: "/"
},
{
title: "Fraud",
url: "/"
},
{
title: "Drug Abuse",
url: "/"
},
{
title: "Adultery",
url: "/"
},
{
title: "Arrested",
url: "/"
}
]
},
{
title: "Wealth",
menuCaption: "Wealth",
url: "",
menu: [
{
title: "Top 10 List",
url: "/"
},
{
title: "Richest Women",
url: "/"
},
{
title: "Richest Men",
url: "/"
},
{
title: "Billionaires",
url: "/"
},
{
title: "Self Made",
url: "/"
},
{
title: "Lottery Winners",
url: "/"
}
]
},
{
title: "World Record",
menuCaption: "World Record",
url: "",
menu: [
{
title: "Tallest",
url: "/"
},
{
title: "Shortest",
url: "/"
},
{
title: "Oldest",
url: "/"
},
{
title: "Fastest",
url: "/"
},
{
title: "World Record Five",
url: "/"
},
{
title: "World Record Six",
url: "/"
}
]
}
]
},
{
title: "Date",
menuCaption: "Date",
url: "/date",
menu: []
},
{
title: "Industry",
menuCaption: "Industry",
url: "/industry",
menu: []
},
{
title: "Nationality",
menuCaption: "Nationality",
url: "/nationality",
menu: []
}
];
I build the loop to access all of the nested menu data:
var mainMenu = $("#test ul.mainMenu");
var subMenuL1 = $("#test ul.mainMenu ul.submenuLevel1");
var subMenuL2 = $("#test ul.mainMenu ul.submenuLevel1 ul.submenuLevel2");
var i, j, k, navItem, navItemLevel1, navItemLevel2;
for(var i = 0; i < menu.length; i++){
var navItem = menu[i];
mainMenu.append('<li class="main"><a href="' + navItem.url + '">' + navItem.title +' </a></li>');
for(var j = 0; j < menu[i].menu.length; j++){
var navItemLevel1 = navItem.menu[j];
subMenuL1.append('<li class="level1"><a href="' + navItemLevel1.url + '">' + navItemLevel1.title +' </a></li>');
for(var k = 0; k < menu[i].menu[j].menu.length; k++){
var navItemLevel2 = navItemLevel1.menu[k];
subMenuL2.append('<li class="level2"><a href="' + navItemLevel2.url + '">' + navItemLevel2.title +' </a></li>');
}
}
};
The HTML container:
<div id="test">
<ul class="mainMenu">
<li>
<ul class="submenuLevel1">
<li>
<ul class="submenuLevel2">
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
509
The proper way to make HTML nested list is with the nested <ul> as a child of the <li> to which it belongs. The nested list should be inside of the <li> element of the list in which it is nested.
Nesting Lists is the process of putting each item within a list. If a list A is the list item of another list B, then list A would be called a nested list. In HTML, to implement nested lists, the code to be used is as follows: <ul> <li>Item A</li>.
A nested list is a list of lists, or any list that has another list as an element (a sublist). They can be helpful if you want to create a matrix or need to store a sublist along with other data types. An example of a nested list.
A list can contain any sort object, even another list (sublist), which in turn can contain sublists themselves, and so on. This is known as nested list.
Here's a nicer solution:
var Menu = function(data) {
this.data = data;
};
Menu.prototype.render = function(root) {
var ul = $("<ul></ul>");
var li = $("<li></li>");
li.append($("<a></a>", {
href: this.data.url,
text: this.data.title
})).appendTo(ul);
ul.appendTo(root);
if (this.data.menu) {
Menu.renderMenus(this.data.menu, $("<li></li>").appendTo(ul));
}
};
Menu.renderMenus = function(menus, root) {
$.each(menus, function(key, val) {
var m = new Menu(val);
m.render(root);
});
}
Menu.renderMenus(menu, $("#container"));
Live example
192
You can use a recursive function for appending submenus.
This is a simple solution for three sublevels or more
function appendMeu(parent, menu, level) {
for(var i = 0;i < menu.length; i ++) {
var submenu = parent.append('<li>' + menu[i].title + '</li>')
.find("li:last");
if(menu[i].menu != undefined && menu[i].menu.length > 0) {
submenu = submenu.append('<ul class="submenuLevel' + (level + 1) + '"></ul>').find("ul");
appendMeu(submenu, menu[i].menu, level + 1);
}
}
}
$(function() {
appendMeu($(".mainMenu"), menu, 0);
});
Here is a solution:
var mainMenu = $("#test ul.mainMenu");
var i, j, k, navItem, navItemLevel1, navItemLevel2;
for(var i = 0; i < menu.length; i++){
var navItem = menu[i];
var new_li = $('<li class="main"><a href="' + navItem.url + '">' + navItem.title +' </a></li>');
mainMenu.append(new_li);
for(var j = 0; j < menu[i].menu.length; j++){
var new_li_ul = $('ul.submenuLevel1', new_li);
if(new_li_ul.length <= 0){
new_li_ul = $('<ul class="submenuLevel1"></ul>');
new_li.append(new_li_ul);
}
var navItemLevel1 = navItem.menu[j];
var new_li_li = $('<li class="level1"><a href="' + navItemLevel1.url + '">' + navItemLevel1.title +' </a></li>');
new_li_ul.append(new_li_li);
for(var k = 0; k < menu[i].menu[j].menu.length; k++){
var new_li_ul_ul = $('ul.submenuLevel2', new_li_li);
if(new_li_ul_ul.length <= 0){
new_li_ul_ul = $('<ul class="submenuLevel2"></ul>');
new_li_li.append(new_li_ul_ul);
}
var navItemLevel2 = navItemLevel1.menu[k];
new_li_ul_ul.append('<li class="level2"><a href="' + navItemLevel2.url + '">' + navItemLevel2.title +' </a></li>');
}
}
};
Here is a fiddle: http://jsfiddle.net/maniator/6JnuG/3/
45
Most of what you make is dynamic so start with something like this
<div id="test">
<ul class="mainMenu">
</ul>
</div>
Then in your code use the things you just made and add to them. Something like this:
for(var i = 0; i < menu.length; i++){
var navItem = menu[i];
subMenuL1 = mainMenu.append('<li class="main"><a href="' + navItem.url + '">' + navItem.title +' </a></li>');
for(var j = 0; j < menu[i].menu.length; j++){
var navItemLevel1 = navItem.menu[j];
subMenuL2 = subMenuL1.append('<li class="level1"><a href="' + navItemLevel1.url + '">' + navItemLevel1.title +' </a></li>');
for(var k = 0; k < menu[i].menu[j].menu.length; k++){
var navItemLevel2 = navItemLevel1.menu[k];
subMenuL2.append('<li class="level2"><a href="' + navItemLevel2.url + '">' + navItemLevel2.title +' </a></li>');
}
}
};
Note: I did not test at all... just looked at the example code and made a few changes to get you in the right direction.
25
Here's how to do this with the jQuery template plugin I mentioned
This would be in your script tag:
$(function () {
$('#t_menu').tmpl(menu).appendTo('#test');
});
And this in your html :
<div id="test"> </div>
<script id="t_menu" type="text/html">
<ul class="mainMenu">
{{each menu}}
<li class="main">
<a href="${url}">${title}</a>
<ul class="submenuLevel1">
{{each menu}}
<li class="level1">
<a href="${url}">${title}</a>
<ul class="submenuLevel2">
{{each menu}}
<li class="level2">
<a href="${url}">${title}</a>
</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
