JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="header"></div>
<div id="parent">
    <section id="menunav">
        <aside class="div_1">div_1</aside>
        <aside class="menu">menu</aside>
        <aside class="book">booking</aside>
    </section>
</div>

CSS

#menunav, .div_1, .menu, .book {position:absolute}
#menunav, .div_1 {height:150px}
#menunav {
    left:-100px;
    top:200px;
    width:150px;
}
.div_1 {
    background-color:black;
    width:100px;
    color: white;
    z-index:2;
}
.menu, .book {
    width:45px;
    right:0;
    padding:5px
}
.menu {
    background-color:yellow;
    top:0px;
    height:60px;
}
.book {
    top:70px;
    background-color:red;
    height:70px;
    overflow:hidden
}
#parent{position:fixed;top:0;left:-50px;height:1700px}
#header{display:block;height:500px;background-color:red}

/* test */
body{height:2000px}

JavaScript

$('.menu').mouseover(function () { 
    $(this).parent().stop().animate({left: '0px'}, 'fast');
}).mouseout().parent().mouseleave(function() {
    $(this).stop().animate({left: '-100px'}, 'slow');
});
$('.book').hover(function() {
    $(this).stop().animate({right: '-5px'}, 'fast');
}, function () {
    $(this).stop().animate({right: '0px'}, 'fast');
});

//show nav at 700px
var go = true;
$(window).scroll(function() {
    var wh = $(this).scrollTop();
    if(wh>=700 && go){
        $('#parent').animate({left: '0px'}, 'fast');
        go = false;
    } else if(wh<700 && !go) {
        $('#parent').animate({left: '-50px'}, 'slow');
        go = true;
    }
});