JSFiddle - React, Tailwind, and code Playground

by Mike Gleeson

HTML

<body>

    <!-- The rest of my page is above the menu -->
    
  <div id="outer">
    <div id="inner">
      <div id="content"></div>
      <div id="handle">HOVER HERE</div>
    </div>
  </div>

</body>

CSS

#outer {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
}

#inner {
    position: relative;
    margin: 0 auto;
    width: 600px;
    background-color: #666;
}

#content {
    display: none;
    height: 180px;
    background-color: #999;
}

#handle {
    height: 50px;
    background-color: #ccc;
}

JavaScript

var menuOpen;
var menuSliding;
var mouseIsOverMenu;

$(document).ready(init_page);
$(window).bind('page:change', init_page);
function init_page() {
    menuOpen = false;
    menuSliding = false;
    mouseIsOverMenu = false;
    
    $('#outer').on('mouseover', function() {
        mouseIsOverMenu = true;
        setTimeout(menu_rollout, 500);
    });
    
    $('#outer').on('mouseout', function(event) {
        if(event.clientY >= document.getElementById('outer').offsetHeight){
            mouseIsOverMenu = false;
            menu_rollin();
        }
    });
}
function menu_rollout() {
    if (mouseIsOverMenu && !menuOpen && !menuSliding) {
        slide('down');
    }
}
function menu_rollin() {
    if (!mouseIsOverMenu && menuOpen && !menuSliding) {
        slide('up');
    } 
}
function slide(direction) {
    menuSliding = true;
    if (direction == 'up') {
        $('#content').slideUp(400, function() {
            menuSliding = false;
            menuOpen = false;
        });
    } 
    else if (direction == 'down') {
        $('#content').slideDown(400, function() {
            menuSliding = false;
            menuOpen = true;
        });
    }
}
jQuery.fn.isChildOf = function (parentId) {
    if ($(this).parents("#" + parentId).length > 0) {
        return true;
    } else {
        return false;
    }
};