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

// didn't know how to load xml into jsfiddle, so here's the xml url:
// https://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml
//example with html is on this fiddle: http://jsfiddle.net/mohitk117/r6LQg/
/*

ajax: xml_url, etc
xml response, data ,

var category_no = data.xml_id.split('_'); //to get the first element of the xml id, but I guess this would only return the last element. Don't know how to change it to return first element.


    function add_menu(){
$('ul.w-nav-list level_2').append(data, function ( ){ for(i=0;i<=data.length) for all data[i].xml_id == category_no[1]: add <li>category-div> + <ul> + li item divs, '/li', '/ul') }