JSFiddle - React, Tailwind, and code Playground

by gilly3

JavaScript

$(function(){
    var menuItems = [
        { name: "Store", url: "/store" },
        { name: "Travel", url: "/store/travel" },
        { name: "Gardening", url: "/store/gardening" },
        { name: "Healthy Eating", url: "/store/healthy-eating" },
        { name: "Cook Books", url: "/store/healthy-eating/cook-books" },
        { name: "Single Meal Gifts", url: "/store/healthy-eating/single-meal-gifts" },
        { name: "Outdoor Recreation", url: "/store/outdoor-recreation" },
        { name: "Hiking", url: "/store/outdoor-recreation/hiking" },
        { name: "Snowshoeing", url: "/store/outdoor-recreation/hiking/snowshoeing" },
        { name: "Skiing", url: "/store/outdoor-recreation/skiing" },
        { name: "Physical Fitness", url: "/store/physical-fitness" },
        { name: "Provident Living", url: "/store/provident-living"}
    ];
    var rootList = $("<ul>").appendTo("body");
    var elements = {};
    $.each(menuItems, function() {
        var parent = elements[this.url.substr(0, this.url.lastIndexOf("/"))];
        var list = parent ? parent.next("ul") : rootList;
        if (!list.length) {
            list = $("<ul>").insertAfter(parent);
        }
        var item = $("<li>").appendTo(list);
        $("<a>").attr("href", this.url).text(this.name).appendTo(item);
        elements[this.url] = item;
    });
});