JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<script src="https://rawgithub.com/krazyjakee/jQuery.Keyframes/master/jquery.keyframes.min.js"></script>
<div class="mainmenu-container">
<ul class="mainmenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Log in</a></li>
</ul>
<div class="mainmenu-rail"></div>
<a id="mainmenu-btn" href="#">
    <div class="circle mainmenu-btn grey">
        <span>Click</span>
    </div>
</a>
</div>

SCSS

body{
    font-family: Tahoma;
    a{
         text-decoration: none;   
    }
}
@mixin square($size) {
    width: $size;
    height: $size;
}
.grey{
    background-color: #d7d7d7;
    color: #fff;
}
.circle{
    border-radius: 50%;
}
.mainmenu-container{
    position: relative;
    -webkit-transform: rotate(-45deg);
}
.mainmenu-btn{
    @include square(100px);
    line-height: 100px;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
}
.mainmenu-rail{
    position: absolute;
    left: 75px;
    top: -5px;
    height: 31px;
    width: 0px;
    background: #fff;
    border-bottom: 2px solid #d7d7d7;
}
.mainmenu{
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 130px;
    top: 25px;
    li{
        opacity: 0;
        float: left;
        margin: 0 5px;
        background-color: #d7d7d7;
        padding: 5px 15px;
        a{
            color: #fff;
            font-weight: bold;
        }
        &:hover{
            transform: rotate3d    
        }
    }
}

CoffeeScript

$.keyframe.define [{
    name: 'mainmenu-rotate',
    'from': {'transform': 'rotate(0deg)'},
    'to': {'transform': 'rotate(45deg)'}
},{
    name: 'rail-extend',
    'from': {'width': '0px'},
    'to': {'width': '600px'}
},{
    name: 'menu-drop',
    'from': {'transform': 'translateY(-30px)', 'opacity': '1'},
    'to': {'transform': 'translateY(0px)', 'opacity': '1'}
}]

$('#mainmenu-btn').click ->
    $('.mainmenu-btn').playKeyframe 'mainmenu-rotate 2000 ease 0 1 normal forwards'
    $('.mainmenu-rail').playKeyframe 'rail-extend 1800 ease 0 1 normal forwards', ->
        $('.mainmenu li').each (index, elem) ->
            delay = index * 150
            $(elem).playKeyframe 'menu-drop 1000 ease '+delay+' 1 normal forwards'