JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p class="font class">Hover me</p>
<p class="font class2">Hover me</p>
<div class="megaMenu">
    <div class="text">HOI</div>
    <div class="text">HOI</div>
    <div class="text">HOI</div>
    <div class="text">HOI</div>
</div>

CSS

* {
    margin:0px;
    padding:0px;
}
html, body {
    background: #14161c;
}
.class {
    position: absolute;
    z-index: 5;
    color:white;
}
.class2 {
    position: absolute;
    z-index: 5;
    left: 150px;
    color:white;
}
.text {
    position: relative;
    z-index: 4;
    color:black;
    top:45px;
    opacity:0;
}
.megaMenu {
    position: absolute;
    width:100%;
    height: 0px;
    background:white;
    top:0;
}

JavaScript

var menuOpen = false;

$(".class").mouseenter(function () {
    if (!menuOpen) {
        $(".megaMenu").animate({
            "height": "500px"
        }, {
            duration: 'slow',
            easing: 'easeOutBack'
        });
        $(".font").animate({
            color: "#000"
        }, 300);
        menuOpen = true;
        setTimeout(function () {
            $(".text").each(function (i) {
                $(this).delay((i + 1) * 200).animate({
                    opacity: 1
                }, 300);
            });
        }, 300);
    }
});

$(".megaMenu").mouseenter(function () {
    menuOpen = true;
});

$(".megaMenu").mouseleave(function (event) {
    if (menuOpen) {
        if(event.target())
        $(".megaMenu").animate({
            "height": "0px"
        }, {
            duration: 'slow',
            easing: 'easeOutBack'
        });
        $(".text").animate({
            "opacity": "0"
        }, 300);
        $(".font").animate({
            color: "#fff"
        }, 300);
        menuOpen = false;
    }
});