JSFiddle - React, Tailwind, and code Playground

by skydivematy

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<ul style="margin:200px;" id="CircledMenu">
    <li> <a href="#" class="MainCircle">Products</a>

        <ul class="SubMenu">
            <li><a href="#">Kitchen</a>
            </li>
            <li><a href="#">Bedroom</a>
            </li>
            <li><a href="#">Car</a>
            </li>
            <li><a href="#">DIY/Storage</a>
            </li>
            <li><a href="#">Bathroom</a>
            </li>
            <li><a href="#">Footwear</a>
            </li>
            <li><a href="#">Garden/Outdoor/Travel</a>
            </li>
            <li><a href="#">Health</a>
            </li>
            <li><a href="#">Gifts</a>
            </li>
            <li><a href="#">Pet</a>
            </li>
            <li><a href="#">Living Solutions</a>
            </li>
            <li><a href="#">Clock/Lighting</a>
            </li>
            <li><a href="#">Personal Care</a>
            </li>
            <li><a href="#">Practial Solutions</a>
            </li>
        </ul>
    </li>
</ul>

CSS

body {
    font-family:verdana;
    font-size:12px
}
ul {
    list-style:none;
    margin:0;
    padding:0
}
a {
    color:#000;
    text-decoration:none
}
#CircledMenu li {
    position:absolute
}
.MainCircle {
    background:red;
    border-radius:100px;
    display:block;
    height:200px;
    line-height:200px;
    position:absolute;
    text-align:center;
    width:200px;
    z-index:1
}
.SubMenu li {
    margin:50px
}
.SubMenu a {
    background:red;
    border-radius:50px;
    display:block;
    height:100px;
    line-height:100px;
    text-align:center;
    width:100px
}

JavaScript

(function ($) {
    $.path = {};
    $.path.arc = function (params) {
        for (var i in params) {
            this[i] = params[i]
        }
        this.dir = this.dir || 1;
        while (this.start > this.end && this.dir > 0) {
            this.start -= 360
        }
        while (this.start < this.end && this.dir < 0) {
            this.start += 360
        }
        this.css = function (p) {
            var a = this.start * (p) + this.end * (1 - (p));
            a = a * 3.1415927 / 180;
            var x = Math.sin(a) * this.radius + this.center[0];
            var y = -Math.cos(a) * this.radius + this.center[1];
            return {
                top: y + "px",
                left: x + "px"
            }
        }
    };
    $.fx.step.path = function (fx) {
        var css = fx.end.css(1 - fx.pos);
        for (var i in css) {
            fx.elem.style[i] = css[i]
        }
    }
})(jQuery);

$(function () {
    var clicked = false,
        allowAnimate = true;
    $('.MainCircle').click(function () {
        var list = $(this).siblings('ul').children('li'),
            noli = list.size();
        if ((!clicked) && (allowAnimate)) {
            allowAnimate = false;
            list.each(function (i) {
                var li = $(this);
                var liw = li.width();
                if (i == 0) {
                    li.animate({
                        top: (liw * -2.3) + "px"
                    }, 250);
                } else {
                    li.delay(250).animate({
                        path: new $.path.arc({
                            center: [0, 0],
                            radius: liw * 2.3,
                            start: 0,
                            end: 360 / noli * i,
                            dir: 1
                        })
                    }, 500, function () {
                        if (i + 1 == noli) {
                            clicked = !clicked;
                            allowAnimate = true;
        ...