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

"use strict";

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

$(function () {

    var $menu = $('.w-nav-list.level_2');

    $.ajax({
        url: animalsXMLurl, // name of file you want to parse
        dataType: "xml",
        success: handleResponse,
        error: function () {
            console.log('Error: Animals info xml could not be loaded.');
        }
    });

    function handleResponse(xmlResponse) {
        var $data = parseResponse(xmlResponse);
        createMenu($data);
    }

    function parseResponse(xmlResponse) {
        return $("item", xmlResponse).map(function () {
            var $this = $(this);
            return {
                id: $this.find("animal_id").text(),
                title: $this.find("animal_title").text(),
                url: $this.find("animal_url").text(),
                category: $this.find("animal_category").text()
            };
        });
    }

    function createMenu($data) {
        var categories = {};
        $data.each(function (i, dataItem) {
            if (typeof categories[dataItem.category] === 'undefined') {
                categories[dataItem.category] = [];
            }
            categories[dataItem.category].push(dataItem);
        });
        for (var category in categories) {
            var categoryItems = categories[category];
            $menu.append($('<li class="w-nav-item level_2 has_sublevel">').html('<a class="w-nav-anchor level_2" href="javascript:void(0);"><span class="w-nav-title">' + category + '</span><span class="w-nav-arrow"></span></a>' + createCategory(categoryItems) + '</li>'));
        }	//console.log($menu.html());
    }
	
    function createCategory(categoryItems) {
        var $list = $('<p>');
        $.each(categoryItems, function (i, dataItem) {
            var $item = $('<li class="w-nav-item level_3"></li>')
                .html('<a class="w-nav-anchor level_3" href="' + dataItem.url + '"><span...