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">
	<!---------------1 START animals with sublevel---------------->
	<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">Birds1</span>
			<span class="w-nav-arrow"></span>
		</a>
		<!-- level 3 -->
		<ul class="w-nav-list level_3">
			<li class="w-nav-item level_3">
				<a class="w-nav-anchor level_3" href="animals/1_1_Animals1.html">
					<span class="w-nav-title">Animals 1</span>
					<span class="w-nav-arrow"></span>
				</a>
			</li>
			<li class="w-nav-item level_3">
				<a class="w-nav-anchor level_3" href="animals/1_2_Animals2.html">
					<span class="w-nav-title">Animals 2</span>
					<span class="w-nav-arrow"></span>
				</a>
			</li>
			<li class="w-nav-item level_3">
				<a class="w-nav-anchor level_3" href="animals/1_3_Animals3.html">
					<span class="w-nav-title">Animals 3</span>
					<span class="w-nav-arrow"></span>
				</a>
			</li>
		</ul>
	</li>
	<!---------------END animals with sublevel------------------>
	<!---------------2 START animals with sublevel---------------->
	<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">Carnivorous 1</span>
			<span class="w-nav-arrow"></span>
		</a>
		<!-- level 3 -->
		<ul class="w-nav-list level_3">
			<li class="w-nav-item level_3">
				<a class="w-nav-anchor level_3" href="animals/2_1_Animals4.html">
					<span class="w-nav-title">Animals 4</span>
					<span class="w-nav-arrow"></span>
				</a>
			</li>
			<li class="w-nav-item level_3">
				<a class="w-nav-anchor level_3" href="animals/2_2_Animals5.html">
					<span class="w-nav-title">Animals 5</span>
					<span...

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


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') }