JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <button id="menu-control">+</button>
    <a class="a option" href="#n" data-pos="0">A</a>
    <a class="b option" href="#n" data-pos="1">B</a>
    <a class="c option" href="#n" data-pos="2">C</a>
    <a class="d option" href="#n" data-pos="3">D</a>
    <a class="e option" href="#n" data-pos="4">E</a>
    <a class="f option" href="#n" data-pos="5">F</a>
</div>

SCSS

body {
    font-family: sans-serif;   
}

#menu {
    position: relative;
    background: #eee;
    width: 200px;
    height: 200px; 
    color: white;
    margin: 50px auto; 
    text-align: center;
    
    button {
        position: absolute;
        z-index: 2;
        box-sizing: border-box;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid black;
        border-radius: 99px;
        box-shadow: inset 0 0 0 3px white;
        margin: 0 0 -20px -20px;
        font-size: 30px;
        line-height: 40px;
        font-weight: bold;
        text-shadow: 0 1px 1px rgba(0,0,0,0.2);
        cursor: pointer;
        color: white;
        background: red;
    }

    .option {
        position: absolute;
        z-index: 1;
        box-sizing: border-box;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 30px;
        border: 1px solid black;
        border-radius: 99px;
        margin: 0 0 -15px -15px;
        box-shadow: inset 0 0 0 3px white;
        line-height: 30px;
        text-decoration: none;
        color: white;
        background: black;
        
        transition-property: bottom, left;
        transition-duration: 0.2s;
        -webkit-transition-property: bottom, left;
        -webkit-transition-duration: 0.2s;
        -moz-transition-property: bottom, left;
        -moz-transition-duration: 0.2s;
        -o-transition-property: bottom, left;
        -o-transition-duration: 0.2s;
    
}

JavaScript

$(function(){
    
    var menu = $('#menu'),
        menucontrol = $('#menu-control'),
        width = menu.width(),
        height = menu.height(),
        radius,
        options = $('.option'),
        len = options.length;

    
    if (width > height) {
        radius = height;
    } else {
        radius = width;
    }

    $.each(options, function() {
        var pos = parseInt($(this).data('pos'));
        var css = (0.02 * pos) + 's';
        $(this).css({
            'transition-delay' : css,
            '-webkit-transition-delay' : css,
            '-moz-transition-delay' : css,
            '-o-transition-delay' : css
        });
    });
        
    $(menu).on('click', menucontrol, function() {
        $.each(options, function() {
            var _this = $(this),
                pos = parseInt(_this.data('pos')),
                angle = (90/(len - 1)) * (len - pos -1) * Math.PI/180;
            
            if(_this.is('.spread')) { 
                var css =     
                _this.css({
                    'bottom' : 0,
                    'left' : 0,
                    'transition-delay' : css,
                    '-webkit-transition-delay' : css,
                    '-moz-transition-delay' : css,
                    '-o-transition-delay' : css
                }).removeClass('spread');
            }
            
            else {
                _this.css({
                    'bottom' : Math.sin(angle) * radius,
                    'left' : Math.cos(angle) * radius,
                    '-webkit-transition-delay' : (0.02 * pos) + 's'
                }).addClass('spread');
            }
        });
    });
    
});