JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<header>
    <div id="inner">
        <nav id="menu">Menu</nav>
        <nav id="more">
            <button class="footerButton">footer</button>
        </nav>
    </div>
</header>
<div id="footerPanel">This is my footer</div>

CSS

body {
    padding:0px;
    margin:0px;
}
header {
    width:100%;
    background-color:#000;
    color:#FFF;
    height:80px;
    position:fixed;
    bottom:0;
    z-index:90;
}
#menu {
    float:left;
    padding:30px;
}
#more {
    float:right;
}
#menu:hover {
    background:#e30000;
}
#footerPanel {
    display:none;
    position:fixed;
    width:100%;
    height:120px;
    bottom:0;
    background-color:#313131;
    z-index:100;
    color:#FFF;
}
button {
    border:none;
    background:none;
    text-transform:uppercase;
    color:#FFF !important;
    display:block;
    float:right;
    font-size:10px;
    font-weight:400 !important;
    background:#000;
    padding:5px 30px 10px 30px;
    cursor:pointer;
    height:90px;
}
button:hover {
    background:#b82025;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}
.activetoggle {
    background:#b82025;
}

JavaScript

$('#more').click(function () {
    var open = $('header').is('.open');
    $('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
    $('header').animate({
        bottom: (open ? '-' : '+') + '=120'
    }, 400, function () {
        $('header').toggleClass('open');
    });
});

$('#menu').click(function () {
    if ($('header').is('.open')) {
        $('header')
            .removeClass('open')
            .animate({
            'bottom': "-=120"
        }, function () {
            var $footer = $('.activetoggle');

            if ($footer.length) 
                $footer
                    .toggleClass('activetoggle footerButton')
                    .text('Footer');
        });
        $('#footerPanel').slideUp(400);
    }
});

$('.footerButton').click(function () {
    var $this = $(this);
    $this.toggleClass('footerButton');
    if ($this.hasClass('footerButton')) {
        $this.text('Footer');
    } else {
        $this.text('Close');
    }
    $(this).toggleClass('activetoggle');
});
$(window).resize(function(){
if($(window).width() < 780){
    if ($('header').is('.open')) {
        $('header')
            .removeClass('open')
            .animate({
            'bottom': "-=120"                
        });
        $footer = $('.activetoggle');
        if ($footer.length) {
             $footer.toggleClass('activetoggle footerButton').text('Footer');
        }
        $('#footerPanel').slideToggle(400);
    }
}
});