JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://tikku.com/scripts/ui/jQuery.radmenu.min.js"></script>
<div id='radial_container'>
<ul class='list'>
<li class='item'> <div class='my_class'> 0 </div> </li>
<li class='item'> <div class='my_class'> 1 </div> </li>
<li class='item'> <div class='my_class'> 2 </div> </li>
<li class='item'> <div class='my_class'> 3 </div> </li>
<li class='item'> <div class='my_class'> 4 </div> </li>
<li class='item'> <div class='my_class'> 5 </div> </li>
<li class='item'> <div class='my_class'> 6 </div> </li>
<li class='item'> <div class='my_class'> 7 </div> </li>
<li class='item'> <div class='my_class'> 8 </div> </li>
<li class='item'> <div class='my_class'> 9 </div> </li>
</ul>
</div>
CSS
#radial_container {
position:relative;
left:0px;
top: 75px;
width:100px;
height:100px;
text-align:center;
}
.radial_div_item {
background-color:none;
height:30px;
padding:10px;
color:#234;
-moz-border-radius:10px;
-webkit-border-radius:10px;
cursor:pointer;
}
.radial_div_item.active {
background-color:#511; color:white;
padding: 10px;
-moz-border-radius:40px;
z-index:100;
}
.my_class {
font-size:1.5em;
color:#abc;
background-color:#def;
-moz-border-radius:30px;
width:30px;
height:30px;
-webkit-border-radius:30px;
}
JavaScript
$(document).click(function (e) {
$('#radial_container').css('left', (e.pageX - 30) + 'px');
$('#radial_container').css('top', (e.pageY - 40) + 'px');
$("#radial_container").radmenu("show");
});
jQuery("#radial_container").radmenu({
listClass: 'list', // the list class to look within for items
itemClass: 'item', // the items - NOTE: the HTML inside the item is copied into the menu item
radius: 100, // radius in pixels
animSpeed:400, // animation speed in millis
selectEvent: "click", // the select event (click)
onSelect: function($selected){ // show what is returned
alert("you clicked on .. " + $selected.index());
},
angleOffset: 0 // in degrees
});