JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<script src="http://tympanus.net/Tutorials/CircularNavigation/js/polyfills.js"></script>
<script src="http://tympanus.net/Tutorials/CircularNavigation/js/modernizr-2.6.2.min.js"></script>
<div class="component">
    <button class="cn-button" id="cn-button">+</button>
    <div class="cn-wrapper" id="cn-wrapper">
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </div>
    <div id="cn-overlay" class="cn-overlay"></div>
</div>

CSS

* {
	position: relative;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
}

html,
body {
	height: 100%;
}


.component {
	position: relative;
	margin-bottom: 3em;
	margin-top: -1px;
	height: 15em;
}

.component > h2 {
	position: absolute;
	overflow: hidden;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	font-weight: 300;
	font-style: italic;
	font-size: 12em;
	opacity: 0.1;
	cursor: default;
}

.cn-button {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 11;
	margin-top: -2.25em;
	margin-left: -2.25em;
	padding-top: 0em;
	width: 4.5em;
	height: 4.5em;
	border: none;
	border-radius: 50%;
	background: #333;
	color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 1.5em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
}

.csstransforms .cn-wrapper {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 10;
	margin-top: -13em;
	margin-left: -13.5em;
	width: 27em;
	height: 27em;
	border-radius: 50%;
	background: transparent;
	opacity: 0;
	-webkit-transition: all .3s ease 0.3s;
	-moz-transition: all .3s ease 0.3s;
	transition: all .3s ease 0.3s;
	-webkit-transform: scale(0.1);
	-ms-transform: scale(0.1);
	-moz-transform: scale(0.1);
	transform: scale(0.1);
	pointer-events: none;
	overflow: hidden;
}

/*cover to prevent extra space of anchors from being clickable*/
.csstransforms .cn-wrapper:after{
  content:".";
  display:block;
  font-size:2em;
  width:6.2em;
  height:6.2em;
  position: absolute;
  left: 50%;
  margin-left: -3.1em;
  top:50%;
  margin-top: -3.1em;
  border-radius: 50%;
  z-index:10;
  color: transparent;
}

.csstransforms .opened-nav {
	border-radius: 50%;
	opacity: 1;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	transition: all .3s ease;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	pointer-events: auto;
}

.csstransforms...

JavaScript

(function () {

    var button = document.getElementById('cn-button'),
        wrapper = document.getElementById('cn-wrapper'),
        overlay = document.getElementById('cn-overlay');

    //open and close menu when the button is clicked
    var open = false;
    button.addEventListener('click', handler, false);
    wrapper.addEventListener('click', cnhandle, false);

    function cnhandle(e) {
        e.stopPropagation();
    }

    function handler(e) {
        if (!e) var e = window.event;
        e.stopPropagation(); //so that it doesn't trigger click event on document

        if (!open) {
            openNav();
        } else {
            closeNav();
        }
    }

    function openNav() {
        open = true;
        button.innerHTML = "-";
        classie.add(overlay, 'on-overlay');
        classie.add(wrapper, 'opened-nav');
    }

    function closeNav() {
        open = false;
        button.innerHTML = "+";
        classie.remove(overlay, 'on-overlay');
        classie.remove(wrapper, 'opened-nav');
    }
    document.addEventListener('click', closeNav);

})();