JSFiddle - React, Tailwind, and code Playground

by Zikes

HTML

<ul class="menu" id="menu">
    <li><a href="#"></a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
</ul>
<ul class="menu" id="menu2">
    <li><a href="#"></a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
</ul>
<ul class="menu" id="menu3">
    <li><a href="#"></a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
</ul>
<ul class="menu" id="menu4">
    <li><a href="#"></a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
</ul>
<ul class="menu" id="menu5">
    <li><a href="#"></a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
</ul>
<ul class="menu" id="menu6">
    <li><a href="#"></a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
</ul>
<ul class="menu" id="menu7">
    <li><a href="#"></a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
    <li><a href="#">&#9733;</a></li>
</ul>
<ul class="menu" id="menu8">
    <li><a href="#"></a></li>
   ...

CSS

html,body{height:100%;padding:0;margin:0;}
.menu li:first-child a {
    background:#f00;
    font-weight:bold;
    font-family:arial black;
    font-size:200%;
    background:url(http://i.imgur.com/3QGAU.png);
    border-color: #fff;
    border-width: 2px;
    border-style: solid;
    box-shadow: 0 0 2px 1px #aaa;
}
.menu li a{
    background:#000;
    color:#fff;
    font-size:125%;
}
.circleMenu-open li:first-child a{
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    -o-transform: rotate(315deg);
    transform: rotate(315deg);
}

#menu2{
    left:200px;
    top:200px;
    position:absolute;
}
#menu3{
    position:absolute;
    right:4px;
    bottom:34px;
}
#menu4{
    position:absolute;
    top:0;
    right:4px;
}
#menu5{
    position:absolute;
    bottom:34px;
    left:0;
}
#menu6{
    position:absolute;
    bottom:34px;
    left:200px;
}
#menu7{
    position:absolute;
    top:200px;
    left:0;
}
#menu8{
    position:absolute;
    top:0;
    left:200px;
}
#menu9{
    position:absolute;
    top:200px;
    right:4px;
}

JavaScript

;(function($, window, document, undefined){
    var pluginName = 'circleMenu',
        defaults = {
            item_diameter: 30,
            circle_radius: 80,
            start_angle: 90,
            end_angle: 0,
            speed: 500,
            delay: 1000,
            step_out: 20,
            step_in: -20,
            trigger: 'hover',
            'animation-timing-function': 'ease'
        };

    function CircleMenu(element, options){
        this.element = $(element);
        this.options = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    CircleMenu.prototype.init = function(){
        var self = this;
        
        if(typeof self.options.direction === 'string'){
            switch(self.options.direction.toLowerCase()){
                case 'bottom-left':
                    self.options.start_angle = 270;
                    self.options.end_angle = 360;
                    break;
                case 'bottom':
                    self.options.start_angle = 180-45;
                    self.options.end_angle = 180+45;
                    break;
                case 'right':
                    self.options.start_angle = 90-45;
                    self.options.end_angle = 90+45;
                    break;
                case 'left':
                    self.options.start_angle = 270-45;
                    self.options.end_angle = 270+45;
                    break;
                case 'top':
                    self.options.start_angle = -45;
                    self.options.end_angle = 45;
                    break;
                case 'top-left':
                    self.options.start_angle = 270;
                    self.options.end_angle = 180;
                    break;
                case 'top-right':
                    self.options.start_angle = 180;
                    self.options.end_angle = 90;
                    break;
                case 'full':
...