JSFiddle - React, Tailwind, and code Playground

by visualdecree

HTML

<ul>
    <li class="menuitem" id="myTag">                    
        <a id="lnk-1" href="#" class="menu-item-a">MenuItem
           <span class="menu-item-span"></span>
        </a>                   
    </li>
    <li class="menuitem" id="myTag">                    
        <a id="lnk-2" href="#" class="menu-item-a">menu-item-span
           <span class="menu-item-span"></span>
        </a>                   
    </li>
    <li class="menuitem" id="myTag">                    
        <a id="lnk-3" href="#" class="menu-item-a">MenuItem 1
           <span class="menu-item-span"></span>
        </a>                   
    </li>
</ul>

CSS

.menuitem{
    width: 150px;
    height:90px;
    background: #000;
}

.menuitem a{
    width: 100%;
    height: 90px;
    height: auto;
    display: block;
    position: relative;
    color: #fff;
    line-height: 90px;
    text-align: center;
    z-index: 9999;
}

.menu-item-span{
    display: none;
    width: 150px;
    height: 90px;
    background: cyan;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -999;
}

.active{
    width: 150px;
    height: 90px;
    background: pink;
}

JavaScript

$(function() {
  $("#lnk-1, #lnk-2, #lnk-3").find("span")
  .hide() // Finds span hide.
  .end() // After find stop.
  .hover(function() { // On hover find and fadein then fadeout
    $(this).find("span").stop(true, true).fadeIn();
  }, function() {
    $(this).find("span").stop(true, true).fadeOut();
  });
});

$('.menu-item-a').click(function(e) {
    $('li.menuitem a').not(this).removeClass('active'); // Active class removal / add
    $(this).stop(true, true).toggleClass("active");    
});