JSFiddle - React, Tailwind, and code Playground

by Daffa Aditya

HTML

<script src="https://aisuka-project.googlecode.com/svn/classie.js"></script>
<script src="https://sites.google.com/site/daffaditya11/modernizr.js"></script>
<body>
  <div class="container">
        <div class="component">
    <!-- Start Nav Structure -->
    <button class="cn-button" id="cn-button">+</button>
    <div class="cn-wrapper" id="cn-wrapper">
        <ul>
          <li><a href="#"><span class="icon-picture"></span></a></li>
          <li><a href="#"><span class="icon-headphones"></span></a></li>
          <li><a href="#"><span class="icon-home"></span></a></li>
          <li><a href="#"><span class="icon-facetime-video"></span></a></li>
          <li><a href="#"><span class="icon-envelope-alt"></span></a></li>
         </ul>
    </div>
    <div id="cn-overlay" class="cn-overlay"></div>
 </div>
  </div>
    
<div class='credit'>
  <a class='blog-link' href='http://dfc48.blogspot.com/2014/07/simple-circle-menu-melayang-sticky.html' target='_blank'>Kembali Ke Tutorial</a>
</div>

CSS

@font-face{
    font-family:FontAwesome;
    src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
 url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
 url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
 url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
    font-weight:400;font-style:normal;}
[class^=icon-]:before,[class*=" icon-"]:before{font-family:FontAwesome;font-weight:400;font-style:normal;display:inline-block;text-decoration:inherit;}
a [class^=icon-],a [class*=" icon-"]{display:inline-block;text-decoration:inherit;}
.icon-large:before{vertical-align:top;font-size:1.3333333333333em;}.btn [class^=icon-],.btn [class*=" icon-"]{line-height:.9em;}
li [class^=icon-],li [class*=" icon-"]{display:inline-block;width:1.25em;text-align:center;}li .icon-large[class^=icon-],li .icon-large[class*=" icon-"]{width:1.875em;}li[class^=icon-],li[class*=" icon-"]{margin-left:0;list-style-type:none;}li[class^=icon-]:before,li[class*=" icon-"]:before{text-indent:-2em;text-align:center;}li[class^=icon-].icon-large:before,li[class*="...

JavaScript

(function(){

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

	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);

})();