JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script id="menu-template" type="text/template">
    <li> <a href="${link}"> ${text} </a></li>
</script>
<nav>
    <ul id="menu">
        <li data-id="prod"> <a href="#">Products</a> </li>
        <li data-id="down"> <a href="#">Downloads</a> </li>
        <li data-id="support"> <a href="#">Support</a> </li>
    </ul>
</nav>

CSS

.ui-menu {
    width: 100px;
}
nav ul {
    list-style: none !important;
    list-style-image: none;
}
nav ul li {
    float: left;
    display: inline-block;
    margin: auto 4px;
    padding: 2px;
    border: 1px solid gray;
}
nav ul li:hover {
    background-color: #eee;
    cursor: pointer;
}

JavaScript

$(function () {
    $('#menu').igPopover({
        direction: "bottom",
        closeOnBlur: false,
        animationDuration: 0,
        contentTemplate: function contentFunction() {
            var menuId = $(this).data('id');
            if (menuId) {
                var listString = '<ul>';
                listString += $.ig.tmpl( $("#menu-template").html(), menuItems[menuId]);
                return listString + '</ul>';
            }
            return "";
        },
        selectors: "li",
        showOn: "mouseenter",
        shown: function (evt, ui) {
           // create jQuery UI menus:
            ui.owner.container().children().menu({
                 select: function( event, ui ) {
                     // handle selection
                     alert(ui.item.text());
                 }
            });
       }
    });
    
    // add some hide handling:
     $('#menu').igPopover( "container" ).on({
        mouseenter: function (e) {
            window.clearTimeout(this._hiding);
        },
        mouseleave: function (e) {
            this._hiding = setTimeout(function () {
                $('#menu').igPopover( "hide" );
            }, 2000);
        }                
    });
    
var menuItems = {
	prod: [
		{ text: "prod", link: "#"},
		{ text: "prod1", link: "#"},
		{ text: "prod2", link: "#"},
		{ text: "prod3", link: "#"},
		{ text: "prod4", link: "#"}
	],
	down: [
		{ text: "down", link: "#"},
		{ text: "down1", link: "#"},
		{ text: "down2", link: "#"}
	],
	support: [
		{ text: "support", link: "#"},
		{ text: "support1", link: "#"},
		{ text: "support2", link: "#"},
		{ text: "support3", link: "#"}
	]
};
});