JSFiddle - React, Tailwind, and code Playground

by ashleycam3ron

HTML

<div id="roulette">
      <a class="logo" href="/"></a>
        <div class="grup ui-resizable">
            <div class="navbar">
                <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">profile</a></li>
                    <li><a href="#">products</a></li>
                    <li><a class="on" href="#">projects</a></li>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">clearance</a></li>
                </ul>
            </div>
            <div class="cap ui-resizable-e ui-resizable-handle" unselectable="on">+</div>
            <div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div>
            <div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div>
            <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001;" unselectable="on"></div>
        </div>
    </div>

CSS

#roulette {z-index: 21;position:fixed;top: 25px;height: 64px;margin-left: -10px;}
    .logo {position:relative;background:#e11b22;float: left;top: 0px;left: 0px;width:320px;height:64px;
            z-index:11;cursor: pointer;}
    .grup {float: left;position: relative;overflow: hidden;width: 58px;height: 64px;z-index: 11;margin-left: 3px;}
    .navbar {position: absolute;width: 100%;height:64px;background:#c5c5c5;}
    .navbar ul {position:absolute;top:24px;left:8px;padding-top:15px;width:450px;}
    .navbar ul li {float: left;padding: 0 9px;}
    .navbar ul li a{font-family:'GillSansRegular', Arial, Helvetica, sans-serif;color:white; text-transform:uppercase; 
                    text-decoration:none; font-size:10px;padding:0 0 7px;}
    .navbar ul li a.on{color:#e11b22;border-bottom:1px solid #e11b22;opacity:1;}
    .cap {border-left:solid 1px white;padding-top:22px;color:white;text-align:center;font-size:18px;
        position: absolute;top: 0px;right: 0px;width:58px;height:42px;background:#e11b22;z-index: 1;cursor: ew-resize;}

JavaScript

//NAVIGATION SLIDE OUT BAR
function initRoulette(){
    $("#roulette .logo").hover(
        function(e){
            var windowWidth = $( window ).width();
            var windowHeight = $(window).height();
            var logo = 320;
            var pancake = windowWidth - logo;
            var    a = 1024; 
            var b=710;
            if(windowWidth < a) {
                $("body").css('overflow','scroll');
            }
             if(windowHeight < b) {
                $("body").css('overflow','scroll');
            }
            
            $("#roulette .logo").stop(true, true).animate({"width": logo}, 250, 'swing');
            $("#roulette .grup").stop(true, true).delay(100).animate({"width": pancake}, 320, 'swing');
            $('#roulette .cap').stop(true, true).delay(1000).animate({backgroundColor: '#e11b22' }, 'fast').html('&ndash;');
            
            },
        function(){
            $("#roulette .grup").stop(true, true).delay(2000).animate({width: 58 }, 300, 'swing');
            $("#roulette .logo").stop(true, true).delay(2300).animate({width: 320}, 300, 'swing');
            $('#roulette .cap').stop(true, true).delay(2300).animate({backgroundColor: '#e11b22' }, 'fast').html('+');    
            });
    $("#roulette .grup").hover(
        function(e){
            $(this).stop(true, true);
            $("#roulette .logo").stop(true, true);
            $('#roulette .cap').stop(true, true).animate({backgroundColor: '#80929e' }, 'fast').html('&ndash;');
        },
        function(){
            $(this).stop(true, true).delay(1000).animate({width: 58 }, 300, 'swing');
            $("#roulette .logo").stop(true, true).delay(1000).animate({width: 320}, 300, 'swing');
            $('#roulette .cap').stop(true, true).delay(1000).animate({backgroundColor: 'red' }, 'fast').html('+');
            });
    $("#roulette .grup").resizable({minWidth: 58, maxWidth: 850, maxHeight: 64});
    $("#roulette .grup .cap").mousedown(function(){
       ...