JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="menu"></div>

CSS

menu {
      width: 200px;
      background-color: gray;
  }

JavaScript

$(document).ready(function () {

    var funcs = [{
        title: 'Menu option 1',
        f: func1
    }, {
        title: 'Menu option 2',
        f: func2
    }, {
        title: 'Menu option 3',
        f: func3
    }];

    var menu = $("#menu");
    var len = funcs.length;

    for (var i = 0; i < len; i++) {
        
        (function(i){$('<p />', {
            'style' : 'cursor: pointer',
            'text' : funcs[i].title,
            'click' : function(){
                funcs[i].f();
                menu.hide();
            }
        }).appendTo(menu)})(i);


    }

});

function func1() {
    alert(1);
}

function func2() {
    alert(2);
}

function func3() {
    alert(3);
}