JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<html>
    <head>    
        <title></title>
    </head>
    <body>
        <div id="wrap">
            <div id="menu">
                <div class="menuitem active">menu1
                    <ul class="smenu">
                        <li>smenu1</li>
                        <li>smenu2</li>                        
                    </ul>
                </div>
                <div class="menuitem">menu2
                <ul class="smenu">
                        <li>smenu1</li>
                        <li>smenu2</li>
                        <li>smenu3</li>
                    </ul>
                </div>
                <div class="menuitem">menu3</div>
                <div class="menuitem">menu4</div>
                <div class="menuitem">menu5</div>
                
            </div>
            <div> </div>
            <div id="brcr">
                bread crumbs
            </div>
            <div id="content">
                content
            </div>
            <div id="footer">
                footer
            </div>        
        </div>
    </body>
</html>

CSS

body{
    background:#eeeeee;
}

#wrap{
    background:#ffffff;
    margin:5px;
}

#menu{
    height:100px;  
    scroll-x:hidden;
    scroll-y:hidden;
}

.active{    
    background:#fefea1;
}

.hlight{
    background:#dedede;
    
}

.menuitem{
    float:left;    
    height:100px;
    width:100%;
    background:#e2dcc9;
    position:relative;
    overflow:hidden;    
}
.smenu{
    position:absolute;
    list-style:none;
    top:100px;
    overflow:hidden;
    background:#000;
    opacity:0.6;
    color:#ddd;

}

#brcr{
    height:20px;
    background:#cecece;
}

#content{
    min-height:500px;
}

#footer{
    background:#dedede;
}

JavaScript

$(document).ready(function() {
    ww = $("#wrap").width();
    $("#menu div").css({
        width: "50",
        opacity: "0.6"
    });
    $("#menu .active").animate({
        opacity: "1",
        width: ww - 50 * 4
    }, 500, "swing");
    t = $("#menu div");
    t.click(function() {
        $("#menu .active").removeClass("active");
        $(this).addClass("active");
    });
    
    t.hover(function() {
        $("#menu .menuitem").stop();
        $(this).toggleClass("hlight");
        $("#menu :not(.hlight)").animate({
            opacity: "0.6",
            width: "50"
        }, 500, "swing");

        $(this).animate({
            opacity: "1",
            width: ww - 50 * 4
        }, 500, "swing",function(){smshow();});

    }, function() {
        //$this = $(this);

        smhide();
        $(this).removeClass("hlight");

    });
});

$("#menu").hover(function() {}, function() {
    if ($("#menu .menuitem").hasClass("hlight")) {
        return;
    }
    $("#menu .menuitem").stop();
     $("#menu :not(.active)").animate({
        opacity: "0.6",
        width: "50"
    }, 300, "swing");    
    $("#menu .active").animate({
        opacity: "0.8",
        width: ww - 50 * 4
    }, 300, "swing");
   
});

function smshow(){
    i = $(".hlight .smenu");
    h = i.find("li").length;    
    i.stop().animate({top:100-h*20},500,"swing");
}

function smhide(){
    i = $(".hlight .smenu");
    i.stop().animate({top:100},500,"swing");
}

var to;

function menter(){ClearTimeout(to);}
function mout(){}