JSFiddle - React, Tailwind, and code Playground

by darkyen

HTML

<link href='http://fonts.googleapis.com/css?family=Atomic+Age' rel='stylesheet' type='text/css'>
<body>
<header>
<div class="circular-menu">
    <div class="overlay"></div> 
    <!-- Fuck pseduo elements cant be transitioned -->
    <a href="#" class="nifty active" data-background="rgba(255,0,0,0.8);" data-angle='0' data-for='home' data-img="" >Home</a>
    <a href="#" class="nifty" data-background="rgba(255,127,29,0.8);" data-angle='2' data-for='login' data-img="" >Login</a>
    <a href="#" class="nifty" data-background="rgba(56,255,19,0.8);"  data-angle='3' data-for='about' data-img="" >About</a>
    <a href="#" class="nifty" data-background="rgba(46,239,250,0.8);" data-angle='1'  data-for='help' data-img="">Help</a>
</div>
    </header>

    <footer>
    </footer>
</body>

CSS

html,body{
 background:#ddd;
}

.circular-menu{  
 -moz-transition:background-color 0.6s;   
 -webkit-transition:background-color 0.6s;
  width:200px;
  height:200px;
  position:relative;
  margin:0px auto;
  background:#333;
  border-radius:150px;    
  border:3px solid #555; 
  box-shadow:0 0 4px 3px rgba(0,0,0,0.4);
}

.circular-menu .overlay{
 width:200px;
 height:200px;
 position:absolute;
 border-radius:100px;  
 -webkit-transition:box-shadow 0.6s,-webkit-transform 0.6s;
 -moz-transition:box-shadow 0.6s,-moz-transform 0.6s;
 transition:box-shadow 0.6s,transform;
 box-shadow:-4px 0px 4px rgba(255,0,0,0.8);
}

.circular-menu::after{
    box-shadow:0 0 4px 3px rgba(0,0,0,0.3);
    z-index:400;
    content:' ';
    position:absolute;
    left:65px;
    top:65px;
    width:70px;
    height:70px;
    border-radius:60px;
    background:#000;
}
.circular-menu a.nifty{
    display:inline-block;
    position:absolute;
    padding:10px;
    padding-top:40px;
    padding-bottom:0px;
    z-index:5;
    font-family: 'Atomic Age', cursive;
    color:#fff;
    text-decoration:none;
    font-size:16px;
}
.circular-menu a.nifty[data-for=home]{
    left:0px;
    top:68px;
}
.circular-menu a.nifty[data-for=login]{
    right:0px;
    top:68px;
}

.circular-menu a.nifty[data-for=help],.circular-menu a.nifty[data-for=about]{
    padding-left:0px;
    padding-right:0px;
    width:100px;
    text-align:center;
    left:50px;
}

.circular-menu a.nifty[data-for=help]{
    top:10px;
    padding-top:30px;
    padding-bottom:8px;
}
.circular-menu a.nifty[data-for=about]{
    padding-top:42px;
    bottom:10px;
}
body{
    min-height:1000px;
    width:100%;
     margin:10px auto;
  background: #666666; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:...

JavaScript

if($.browser.webkit){
 vendor = '-webkit-';
}else{
 vendor = '-moz-';
}
$(function(){
    var current_state = { 
        angle:0,
        totalAngle:0,
        background:'rgba(255,0,0,0.8)'
    };
    $('a.nifty').hover(function(){
        var new_angle = $(this).attr('data-angle')*1; // To ensure data type is int
        var color = $(this).attr('data-background');
        var angle = 0;
        if(current_state.angle === new_angle )
         return;
        current_state.totalAngle +=  new_angle - current_state.angle; // Final - initial = change;
        current_state.angle = new_angle
        angle = (current_state.totalAngle * 90);
        console.log(angle);
        var shadow ='-4px 0px 4px '+color;
        $(this).siblings('.overlay').attr('style',"box-shadow:"+shadow+";"+vendor+"transform:rotate("+angle+"deg);");
    }).click(function(){
     $(this).siblings('.active').removeClass('active');
     $(this).addClass('active');   
    });
    $('.circular-menu').hover(null,function(){ 
         var activeE = $(this).children('.active');
         var new_angle = activeE.attr('data-angle')*1;
         var color = activeE.attr('data-background');
         var angle = 0;
         if(current_state.angle === new_angle )
          return;
         current_state.totalAngle +=  new_angle - current_state.angle; 
         current_state.angle = new_angle
        angle = (current_state.totalAngle * 90);
        var shadow ='-4px 0px 4px '+color;
        activeE.siblings('.overlay').attr('style',"box-shadow:"+shadow+";"+vendor+"transform:rotate("+angle+"deg);");
    });
});