Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This should get it done.</p> <p>Markup</p> <pre><code>&lt;ul id="nav"&gt;&lt;/ul&gt; </code></pre> <p>JavaScript</p> <pre><code>var data = [ { "parent": "Home", "child": [ ] }, {"parent": "Services", "child": [ {"title":"Infrastruture"}, {"title":"Development"} ] }, { "parent": "Sector", "child": [ {"title":"Recruitment Consultant"}, {"title":"Change Management"}, {"title":"Industrial Relations"} ] }, ]; $(function() { var nav = $("#nav"); $.each(data,function(idx, obj){ if(obj.child.length&gt;0) { nav.append('&lt;li&gt;&lt;a href="#"&gt;'+obj.parent+'&lt;/a&gt;&lt;ul id="'+obj.parent+'"&gt;'); //Create Parent menu and attach Child menu items list with ID same as parent menu name. var parent = $("#"+obj.parent); //Select this parent to insert child items. //Insert child menu items. $.each(obj.child, function(idx, childobj){ parent.append('&lt;li&gt;&lt;a href="#"&gt;'+childobj.title+'&lt;/a&gt;&lt;/li&gt;'); }); nav.append('&lt;/ul&gt;&lt;/li&gt;'); //Close each tag. } else { nav.append('&lt;li&gt;&lt;a href="#"&gt;'+obj.parent+'&lt;/a&gt;&lt;/li&gt;'); //No child menu items present, just create parent menu. } }); }); </code></pre> <p>This could be semantically wrong since we've got so much of markup coupled with JS (not a good idea), but as long as structure remains the same, it is fine to do this way.</p> <p><a href="http://jsfiddle.net/7KE2s/" rel="nofollow">Demo Fiddle</a></p> <p><strong>P.S.:</strong> I'm leaving you with the <em>styling</em> part. Hint: Provide classes along with markup in JS itself. ;-)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload