JSFiddle - React, Tailwind, and code Playground

by stichoza

HTML

<div class="menu-bars">
    <span></span>
    <span></span>
    <span></span>
    <div class="menu-bars-pointer"></div>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

SCSS

body {
    background: url(http://i.imgur.com/M1PRBTF.jpg);
    background-size: cover
}
.menu-bars {
    // vars
    $general-size: 64px;
    $bar-count: 3;
    $bar-width-ratio: 0.6;
    $bar-height: 4px;
    $offset-bars: 4px;
    $offset-bars-init-top: $general-size / 2 - (($offset-bars + $bar-height) * $bar-count - $offset-bars) / 2;
    // code
    position: fixed;
    display: block;
    top: 20px;
    left: 20px;
    width: $general-size;
    height: $general-size;
    background: rgba(black, 0.3);
    border-radius: 50%;
    -webkit-transition: all 0.4s ease;
    .menu-bars-pointer {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        cursor: pointer;
        border-radius: 50%;
    }
    & > span {
        -webkit-transition: all 0.3s ease-out;
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: right center;
        display: block;
        position: absolute;
        width: $general-size * $bar-width-ratio;
        right: $general-size * (1 - $bar-width-ratio) / 2;
        height: $bar-height;
        border-radius: $bar-height / 2;
        background: rgba(white, .6);
        &:nth-child(1) {
            top: $offset-bars-init-top;
            -webkit-transition-duration: 0.15s;
        }
        &:nth-child(2) {
            top: $offset-bars-init-top + $offset-bars + $bar-height;
            -webkit-transition-duration: 0.2s;
        }
        &:nth-child(3) {
            top: $offset-bars-init-top + 2 * ($offset-bars + $bar-height);
            -webkit-transition-duration: 0.3s;
        }
    }
    
    ul {
        list-style: none;
        margin: 0;
    }
    
    & > ul {
        position: absolute;
        left: 100%;
        top: -320px;
        background: rgba(black, 0.3);
        padding: 100px 0 10px;
        display: block;
        opacity: 0;
        border-radius: 0 0 2px 2px;
        -webkit-transition: all 0.3s ease-out;
        li {
           ...