JSFiddle - React, Tailwind, and code Playground

by AnnaGerber

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<div ng-app="menudemo">
<div class="menu container" ng-controller="menuController">
    <ul class="dropdown-menu" role="menu">
      <li ng-repeat="m in menuItems" ng-class="{'dropdown-submenu' : m.submenu && m.submenu.length}">
        <a>{{m.name}}</a>
          <ul ng-if="m.submenu && m.submenu.length" class="dropdown-menu">
            <li ng-repeat="subm in m.submenu">
              <a>{{subm.name}}</a>
            </li>
          </ul>
      </li>
    </ul>
  </div>
</div>

CSS

.menu {
	position:relative;
}
.menu > .dropdown-menu {
	position:static;
	display:block;
}

JavaScript

var App = angular.module("menudemo",[]);

App.controller("menuController", ['$scope', function($scope){

    $scope.menuItems = [{'name':'foo'}];
    $.ajax({
    url: "http://spreadsheets.google.com/feeds/list/1e5HFKw1bt0Z5XWwAx_Q3VxHwcSnpDkd9XxFlaUtChNk/od6/public/values",
    jsonp: "callback",
    dataType: "jsonp",
    data: {
        alt: "json-in-script",
        format: "json"
    },
    success: function( response ) {
        console.log( response ); 
        var entries = response.feed.entry;
        var topLevel;
        var currentMenu;
        $(entries).each(function(i,entry){
            var category = entry.title.$t;
            if (category.indexOf("Row:") == -1) {
                currentMenu = {'name':category, submenu: []};
                $scope.menuItems.push(currentMenu);
                topLevel = category;
            } else {
                category = topLevel;
            }
            var term = entry.content.$t;
            term = term.split(": ")[1];
            currentMenu.submenu.push({'name':term});
            console.log(category,term);
        });
        console.log("menu is",$scope.menuItems)
    },
    error: function(e){
            console.log("error",e)
    }
});
   
    $scope.locs = [
		{
			name: "CurrentEvents",
			submenu: null
		},
		{
			name: "Top Brands",
			link: "#OP2",
			id: "Option2",
			submenu: [
				{
					name: "Apple",
				},
				{
					name: "Microsoft",	
				},
				{
					name: "Google",
				}
			]
		},
		{
			name: "Places",
			submenu: [
				{
					name: "New York City",
					
				},
				{
					name: "London",
				}
			]
		}
    ];
}]);