JSFiddle - React, Tailwind, and code Playground

by rosenfeld

HTML

<a class="openme">Find ATM Locations</a>

 <div id="menu" class="show">
    <a href="#">My Accounts</a>
    <a href="#">Testing Options...</a>
    <a href="#">More Options...</a>
 </div>

CSS

a{
    text-decoration: none;
    color: inherit;
}

#moz_background
{
    display:none;
}

.openme {
    display: inline-block;
    color: #fff;
    margin-top: 200px;
    background-color: #333;
    padding: 10px;
}

#menu
{
    position:absolute;
    padding:0px 0px 20px;
    background:-webkit-canvas(menu_background) no-repeat;
    background:-moz-element(#moz_background) no-repeat;
    -webkit-transition:opacity 300ms ease-out;
    -moz-transition:opacity 300ms ease-out;
    transition:opacity 300ms ease-out;
}

#menu a{
    float:left;
    margin: 7px;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    border-radius: 5px;
    background-image: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#fff), to(#edeff3));
    background-image: -moz-linear-gradient(top, #fff, #edeff3);
}

.hide { 
    opacity: 0; 
}

.show {
    opacity: 1;  
}

JavaScript

function initMenu() {   
    var menu = document.getElementById('menu');
    
    drawMenuBackground(menu.offsetWidth, menu.offsetHeight);

    menu.addEventListener('webkitTransitionEnd', function(e){
        if(menu.getAttribute('class') == 'hide'){
           // menu.style.setProperty('left','-1000px','');
        }
    },true);

    menu.addEventListener('transitionend', function(e){
        if(menu.getAttribute('class') == 'hide'){
           // menu.style.setProperty('left','-1000px','');
        }
    }, true);
 
    menu.setAttribute('class', 'hide');

}

function drawMenuBackground(rectWidth, rectHeight){

    if(document.getCSSCanvasContext){

        var context = document.getCSSCanvasContext('2d', 'menu_background', rectWidth, rectHeight);    
    
    } else {
    
        var menu = document.getElementById('menu');
        var mycanvas = document.createElement('canvas');
        mycanvas.setAttribute('id','moz_background');
        mycanvas.setAttribute('width', rectWidth);
        mycanvas.setAttribute('height', rectHeight);

        menu.appendChild(mycanvas);

        var context = mycanvas.getContext('2d');


}

    var arrowHeight = 20;
    var radius = 6;
    var lineWidth = 1;
    var pad = lineWidth/2;
    var xs = pad;
    var ys = pad ;
    var xe = rectWidth - pad - arrowHeight;
    var ye = rectHeight - pad - arrowHeight;

    var gradient = context.createLinearGradient(rectWidth/2, 0, rectWidth/2, arrowHeight * 2);
    gradient.addColorStop(0, '#eee'); 
    gradient.addColorStop(1, '#151d31'); 

    context.beginPath();

    context.lineJoin = 'miter';
    
    context.moveTo(xs + radius, ys);
    
    context.lineTo(xe - radius, ys);
    
    context.arcTo(xe, ys, xe, ys + radius, radius);
    
    
    
    context.lineTo(xe, ye - radius);
    context.arcTo(xe, ye, xe - radius, ye, radius);
    
    
    
    context.lineTo(rectWidth/4 + (arrowHeight + pad), ye);
    context.lineTo(rectWidth/4, pad + ye + arrowHeight);
   ...