JSFiddle - React, Tailwind, and code Playground

by Mohit Khanna

HTML

<li class="w-nav-item level_1 has_sublevel">
<a class="w-nav-anchor level_1" href="#">
	<span class="w-nav-icon"><i class="fa fa-files-o"></i></span>
	<span class="w-nav-title">Animals</span>
	<span class="w-nav-arrow"></span>
</a>
<!-- level 2 -->
<ul class="w-nav-list level_2">
    
</ul>
</li>

CSS

/*simple css dropdown menu from this page:
http://code-tricks.com/simple-css-drop-down-menu/
I'm not using this menu, my menu css is different, and it's in a main styesheet so I don't know which parts to copy. */

/*Initialize*/
ul.w-nav-list .level_2, ul.w-nav-list.level_2 ul.w-nav-list.level_3 {
    padding:0;
    margin: 0;
}
ul.w-nav-list.level_2 li, ul.w-nav-list.level_2 ul.w-nav-list.level_3 li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul.w-nav-list.level_2 li a, ul.w-nav-list.level_2 li ul.w-nav-list.level_3 li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul.w-nav-list.level_2 li {
    position: relative;
}
/*sub menu*/
ul.w-nav-list.level_2 li ul.w-nav-list.level_3 {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul.w-nav-list.level_2 li:hover ul.w-nav-list.level_3 {
    display:block;
}

JavaScript

var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';


$(function() {

$.ajax({
    url: animalsXMLurl, // name of file you want to parse
    dataType: "xml",
	
    success: function parse(xmlResponse){
	
        var data = $("item", xmlResponse).map(function() {
         return {
			 id: $("animal_id", this).text(),
             title: $("animal_title", this).text(),
			 url: $("animal_url", this).text(), 
			 category: $("animal_category", this).text().split('/'),
         };
         }).get();
        var categnumber = new Array();
        for(i=0;i<=data.length;i++) //for splitting id, and getting 0 for category_number (1 or 2 or 3...and so on)
         {   categnumber[i] = data[i].id.split('_');
		 console.log(categnumber[i][0]); 
        for(j=0;j<=data.length;j++) //appending via a function.
		{  var data_text = category_or_animal(data, categnumber, j);
		console.log(data_text);
            $('ul.w-nav-list.level_2').append( data_text );
        }
		}
        
        
                function category_or_animal(d, catg, k){
				var catg1 = new Array();
				var catg2 = new Array();
				var catg1 = d[k].id.split('_');
				if(d[k-1]){
				var catg2 = d[k-1].id.split('_');
				//if(d[k-1].id)
                    if (catg1[0] != catg2[0])
                      return category_gen(d,k);
                }    else return '</ul>' + animal_gen(d,k);
                }
        function category_gen(d,z){
         var category_var = '<li class="w-nav-item level_2 has_sublevel"><a class="w-nav-anchor level_2" href="javascript:void(0);"><span class="w-nav-title">' + d[z].category + '</span><span class="w-nav-arrow"></span></a><ul class="w-nav-list level_3">'; 
         return category_var;
        }
        
        function animal_gen(d,z){
          var animal_var = '<li class="w-nav-item level_3"><a class="w-nav-anchor level_3" href="animals/' + d[z].url + '"><span class="w-nav-title">' + d[z].title + '</span><span...