Menu Toggle (Kaskade)

Proposed animation for Crossfader v3 Menu

by Nirvanachain

HTML

<div class="screen">
        <div class="menu-btn"></div>
        <div class="menu-bar">
            <div class="menu feed">
                <img src="http://i.imgur.com/DBruDkk.png" />
            </div>
            <div class="menu radio">
                <img src="http://i.imgur.com/pIErM3w.png" />
            </div>
            <div class="menu browse">
                <img src="http://i.imgur.com/9PQemDg.png" />
            </div>
            <div class="menu profile">
                <img src="http://i.imgur.com/Tgp84Mm.png" />
            </div>
        </div>
    </div>

CSS

/* image animating out one at a time */
.menu {height:60px; padding:0px; margin:0px;}

.menu img {
    height:60px;
    padding:0px;
    margin:0px;
    width:auto;
    opacity:0;
    position:relative;
    left:-18px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.menu.open img {
    opacity:1;
    left:0px;
}
.menu-bar {
    position:absolute;
    left:-50px;
    top:0px;
    width:50px;
    height:320px;
    overflow:hidden;
    -webkit-transition: all .6s ease;
    transition: all .6s ease;
    opacity:0;
    pointer-events:none;
}
/* toggles outlines to slide in */
 .menu-bar.active {
    opacity:1;
    left:0px;
    background:#000;
    pointer-events:auto;
}
.menu-bar.active .menu {
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    padding:0px;
    outline:0px;
}
.menu-bar.active .menu.feed {
    border-left:4px solid #e02726;
}
.menu-bar.active .menu.radio {
    border-left:4px solid #58bce2;
}
.menu-bar.active .menu.browse {
    margin-top:64px;
    border-left:4px solid #efe700;
}
.menu-bar.active .menu.profile {
    border-left:4px solid #ff91fe;
}
.menu-btn {
    position:absolute;
    top:0px;
    left:0px;
    width:50px;
    height:50px;
    background:url('http://i.imgur.com/MyRm6gv.png');
}
/* Core Background */
 .container {
    width:556px!important;
    padding:136px 210px 176px 190px;
    margin-left:auto;
    margin-right:auto;
    background:url("http://i.imgur.com/xtdiQFH.png");
    background-size:100% 100%;
}
.screen {
    background:#000;
    width:150px;
    height:320px;
    overflow:hidden;
    position:relative;
    -webkit-perspective:600px;
    margin: 24px auto;
}

JavaScript

var redOn = function () {
    $('.feed').addClass('open');
}

var blueOn = function () {
    $('.radio').addClass('open');
}

var yellowOn = function () {
    $('.browse').addClass('open');
}

var pinkOn = function () {
    $('.profile').addClass('open');
}

var kaskade = function () {
    setTimeout(redOn, 150);
    setTimeout(blueOn, 300);
    setTimeout(yellowOn, 450);
    setTimeout(pinkOn, 600);
};

var redOff = function () {
    $('.feed').removeClass('open');
}

var blueOff = function () {
    $('.radio').removeClass('open');
}

var yellowOff = function () {
    $('.browse').removeClass('open');
}

var pinkOff = function () {
    $('.profile').removeClass('open');
}

var unKaskade = function () {
    setTimeout(redOff, 150);
    setTimeout(blueOff, 300);
    setTimeout(yellowOff, 450);
    setTimeout(pinkOff, 600);
};


$(document).ready(function () {

    $(document).on('click', ".menu-btn", function () {
        $('.menu-bar').addClass('active');
        kaskade();

    });

    $(document).on('click', ".menu", function () {
        unKaskade();
        setTimeout(function () {
            $('.menu-bar').removeClass('active');
        }, 1000);
    });


});