JSFiddle - React, Tailwind, and code Playground

by johnc_22

HTML

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<ul class="chatActionMenu">
  <li class="menuMemberInfoLabel ui-state-disabled">Member Info</li>
  <li class="menuLeaveConversation">Leave Chat</li>
</ul>

<div id="chatMenu" class="chatMenu">
  <img src="Images/plus_666666_20.png" alt="Add Recipient" class="chatAddRecipient" />
  <img src="Images/cog_666666_20.png" alt="Actions" class="chatActions" />
</div>

CSS

.chatActions
{
    cursor:pointer;
    display:none;
}

.chatActionMenu
{
    display:none;
    position:absolute;
	width:200px;
    z-index:10;
}

.chatActionMenu .ui-menu-item
{
	padding: 5px;
}

.chatActionMenu .ui-state-disabled
{
	font-size:13px;
}

.chatActionMenu .menuMemberDetail
{
	font-size:15px;
}

.menuLeaveConversation
{
	border-top: 1px #D7D7D7 solid;
	color:#AA0000;
}

.menuLeaveConversation:hover
{
	border-top: 1px #D7D7D7 solid;
	color:#AA0000;
}

JavaScript

function showMenu (event)
{
    if (jQuery(".chatActionMenu").is(":visible") === true)
    {
        return;
    }

    jQuery(".chatActionMenu").fadeIn(200).position(
    {
        my: "right top",
        at: "right bottom+5",
        of: ".chatActions"
    });
};

function hideMenu (event)
{
    if (jQuery(".chatActionMenu").is(":visible") === false)
    {
        return;
    }

    var hideMenuInterval = setInterval(function ()
    {
        if (mouseOnMenu === false)
        {
            clearInterval(hideMenuInterval);
            jQuery(".chatActionMenu").fadeOut(400);
        }
    }, 500);
};

function setMouseOnMenu()
{
	mouseOnMenu = true;
};

function resetMouseOnMenu()
{
	mouseOnMenu = false;
};

var onMouseMenu = false;
jQuery(".chatActionMenu").menu();
jQuery("#chatMenu").on("mouseenter", showMenu);
jQuery("#chatMenu").on("mouseleave", hideMenu);
jQuery(".chatActionMenu").on("mouseenter", setMouseOnMenu);
jQuery(".chatActionMenu").on("mouseleave", resetMouseOnMenu);