JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<script src="http://zikes.github.io/circle-menu/jQuery.circleMenu.js"></script>
<link rel="stylesheet" href="http://zikes.github.io/circle-menu/examples/css/circle-menu.css">
<nav>
    <ul>
        <li><a href="#" rel="ex-full-clickopen">Full, Click to Open</a>
        </li>
    </ul>
</nav>
<div id="examples">
    <div id="ex-full-clickopen">
        <ul class="menu circleMenu-closed" id="menu2" style="list-style: none; margin: 0px; padding: 0px; width: 30px;">
            <li style="display: block; width: 30px; height: 30px; text-align: center; line-height: 30px; position: absolute; z-index: 1000; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; -webkit-transition: all 500ms ease; transition: all 500ms ease;"><a href="#"></a>
            </li>
            <li style="display: block; width: 30px; height: 30px; text-align: center; line-height: 30px; position: absolute; z-index: 1; top: 0px; left: 0px; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; -webkit-transform: scale(0.5); -webkit-transition: all 500ms ease; transition: all 500ms ease;"><a href="#" alt="Item 1" title="Item 1">1</a>
            </li>
            <li style="display: block; width: 30px; height: 30px; text-align: center; line-height: 30px; position: absolute; z-index: 1; top: 0px; left: 0px; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; -webkit-transform: scale(0.5); -webkit-transition: all 500ms ease; transition: all 500ms ease;"><a href="#" alt="Item 2" title="Item 2">2</a>
            </li>
            <li style="display: block; width: 30px; height: 30px; text-align: center; line-height: 30px; position: absolute; z-index: 1; top: 0px; left: 0px; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px;...

JavaScript

$(function(){
                $('#menu').circleMenu({direction:'bottom-right',
                    open: function(){console.log('menu opened');},
                    close: function(){console.log('menu closed');},
                    init: function(){console.log('menu initialized');}});
                $('#menu2').circleMenu({
                    direction:'full', 
                    trigger:'click',
                    open: function(){console.log('menu opened');},
                    close: function(){console.log('menu closed');},
                    init: function(){console.log('menu initialized');},
                    select: function(evt,index){console.log(evt,index)}
                }).on('circleMenu-open',function(){
                    console.log('menu opened 2');
                });
                $('#menu3').circleMenu({direction:'top-left'});
                $('#menu4').circleMenu({direction:'bottom-left'});
                $('#menu5').circleMenu({direction:'top-right'});
                $('#menu6').circleMenu({direction:'bottom'});
                $('#menu7').circleMenu({direction:'right'});
                $('#menu8').circleMenu({direction:'top'});
                $('#menu9').circleMenu({direction:'left'});
                $('#menu10').circleMenu({direction:'bottom-half'});
                $('#menu11').circleMenu({direction:'right-half'});
                $('#menu12').circleMenu({direction:'top-half'});
                $('#menu13').circleMenu({direction:'left-half'});
                $('#menu14').circleMenu({direction:'full', trigger:'click', step_in: 300, step_out: 300});
                $('#menu15').circleMenu({direction:'full', trigger:'click', step_in: -300, step_out: -300});
                $('#menu16').circleMenu({
                    direction:'full',
                    step_in:0, 
                    step_out:0
                });
                
               ...