JSFiddle - React, Tailwind, and code Playground

by gmcalab

HTML

<div class="uiMenuContainer" id="e_9dec39e3_2337_4378_8010_af30e34da888">
    <ul class="uiMenu ui-widget-header">
        
        <li class="uiMenuNoHover">
            <span onclick="uiMenuClickAction(this)">View Submission</span>
        </li>
        <li>
            <span>Actions</span>
            <ul class="uiHidden">
                <li>
                    <span onclick="uiMenuClickAction(this)">Start Change Request</span>
                </li>
                <li>
                    <span onclick="uiMenuClickAction(this)">Start Renewal Request</span>
                </li>
                <li>
                    <span onclick="uiMenuClickAction(this)">Close Bound Submission</span>
                </li>
                <li class="uiMenuItemDisabled uiMenuNoHover">
                    <span>Create Binder</span>
                </li>
                <li>
                    <span onclick="uiMenuClickAction(this)">Create Task</span>
                </li>
                <li>
                    <span onclick="uiMenuClickAction(this)">Send E-mail</span>
                </li>
                <li>
                    <span onclick="uiMenuClickAction(this)">Add new Note</span>
                </li>
            </ul>
        </li>
        <li class="uiMenuAlignRight uiMenuItemRight">
            <span title='gcalabro'>gcalabro</span>
            <ul class="uiHidden">
                <li><span>Test</span></li>
            </ul>
        </li>
        <li class="uiMenuAlignRight uiMenuItemRight">
            <span title='gcalabro'>gcalabrfsafso</span>
            <ul class="uiHidden">
                <li><span>Test</span></li>
            </ul>
        </li> <li class="uiMenuAlignRight uiMenuItemRight">
            <span title='gcalabro'>bfso</span>
            <ul class="uiHidden">
                <li><span>Test</span>
                <ul>
                    <li>test</li>
                    </ul>
                </li>
            </ul>
        </li>


   ...

CSS

body{
     font-family: Tahoma;
     font-size: 11px;   
}

.uiMenuContainer
{
      background-color: #15428b; 
}

.uiMenu
{
    /*height: 20px;*/
    padding: 0;
    margin: 0;
    font-size: 11px;
    border-bottom: 1px solid #15428b;
    
}

.uiMenu li
{
    float: left;
    position: relative;
    list-style-type: none;
    padding: 5px;
    line-height: 16px;
    height: 16px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    
     /* IE 7- fixes */
    *display: inline;
    *zoom: 1;
}

.uiMenuImage
{
    vertical-align: bottom;
    margin-right: 2px;
}

.uiMenuItemRight{
    float: right !important;   
}


.uiMenuItemSeperator
{
    /*border-bottom: 1px solid #ccc;
    line-height: 1px;
    height: 1px;
    width: 100px;*/
    background-image: url('Content/images/uiMenuItemSeperator.png');
    background-repeat: repeat-x;
    background-position: center;
    line-height: 1px !important;
    height: 1px !important;
    
}

.uiMenuAlignRight
{
    float: right;
}

.uiMenuItemDisabled
{
    color: #999;
    font-style: italic;
}

.uiMenuHover
{
    background-color: #fff;
    color: #000 !important;
    border-top: 1px solid #15428b !important;
    border-right: 1px solid #15428b !important;
    border-left: 1px solid #15428b !important;
    cursor: pointer;  
}

.uiMenuItemHover
{
    border: 1px solid #15428b !important;
    background-color: #ffb74c;
    cursor: pointer;  
}
   
.uiMenuFlyout {

    border-bottom: 1px solid #15428b;
    border-right: 1px solid #15428b;
    border-left: 1px solid #15428b;
    background-color: #fff;
    display: inline-block;
    position: absolute;
    z-index: 100;
    padding: 5px;
    visibility: hidden;
}

.uiMenuFlyout > ul 
{
    margin: 0;
    padding: 0;
}

.uiMenuFlyout li
{
    list-style-type: none;  
    padding: 2px 10px 2px 5px;
    line-height: 16px;
    height: 16px;
   ...

JavaScript

$(document).ready(function() {

    uiMenuInit('#test');

});



function uiMenuInit(id) {

    $('.uiMenu > li').each(function() {

        $(this).data('header', true);
        uiMenuCreateItem(this);
    });
}

function uiMenuCreateItem(li) {

    $(li).hover(function() {
        uiMenuItemMouseEnter(li);
    }, function(e) {
        uiMenuItemMouseLeave(li);
    });

    var flyout = null;

    if (!$(li).hasClass('uiMenuItemDisabled')) flyout = uiMenuCreateFlyout(li);

    if (flyout) {
        $(flyout).hover(function(e) {
            uiMenuFlyoutMouseEnter(li, flyout);
        }, function(e) {
            uiMenuFlyoutMouseLeave(e, li, flyout);
        });
    }

}

function uiMenuFlyoutPosition(flyout, li) {
    var right = $(window).width() - ($(li).outerWidth() + $(li).position().left);

    $(flyout).css('left', 'auto');
    $(flyout).css('right', right);
}

function uiMenuCreateFlyout(li) {

    var html = $(li).find('ul').html();

    if (html) {

        $(li).find('ul').remove();

        var top = $(li).position().top + $(li).outerHeight();

        var left = $(li).position().left;

        var isFlyout = $(li).parent().parent().hasClass('uiMenuFlyout');

        var isFlyoutChild = $(li).parent().parent().hasClass('uiMenuFlyoutChild');

        if (isFlyout) {
            var container = $(li).parent().parent();
            left = container.position().left + container.outerWidth() - 1;

            if (isFlyoutChild) top += (container.position().top - $('.uiMenu').outerHeight()) + 2;
        }



        var flyoutHtml = '<span class="uiMenuFlyout" style="top: ' + top + 'px; left: ' + left + 'px;"><ul class="uiMenuChild">' + html + '</ul></span>';
        var flyout = $(flyoutHtml).appendTo($('.uiMenu').closest('.uiMenuContainer'));

        if (isFlyout) $(flyout).addClass('uiMenuFlyoutChild');

        $(li).data('flyout', flyout);

        var flyoutWidth = $(flyout).width();

        // dynamically set width 
        if (flyoutWidth < 100)...