<head>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<div id="container">
<div id="corner"><a href="#"><i id="mainbtn" class="fa fa-bars fa-2x fa-inverse"></i></a>
<svg height="200" width="200">
<circle cx="0" cy="0" r="75" fill="black" />
</svg>
</div>
</div>
<div class='circle-container'>
<a href='#' class='deg0'><i class="fa fa-home fa-2x"></i></a>
<a href='#' class='deg30'><i class="fa fa-cog fa-2x"></i></a>
<a href='#' class='deg60'><i class="fa fa-comments fa-2x"></i></a>
<a href='#' class='deg90'><i class="fa fa-heart fa-2x"></i></a>
</div>
<div id="author">
<p>Demo created by
<a href="http://www.derekskinner.tv" target="_blank">Derek Skinner</a></p>
<p>Follow Me on <a href="https://twitter.com/DerekTS9"><i class="fa fa-twitter-square"></i></a>
</div>
#mainbtn {
#mainbtn {
position:absolute;
top:15px;
left:15px;
z-index:2;
}
.circle-container {
position: absolute;
top:-50px;
left:-47px;
width: 100px;
height: 100px;
z-index:0;
}
.circle-container a {
display: block;
overflow: hidden;
position: absolute;
width: 32px; height: 32px;
margin:50px;
}
.circle-container i { display: block; width: 100px; }
.deg0 { transform: rotate(-25deg) translate(5.75em) rotate(-0deg); transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}
.deg30 { transform: rotate(-25deg) translate(5.75em) rotate(-30deg); transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
transition: all 0.5s ease-out; }
.deg60 { transform: rotate(-25deg) translate(5.75em) rotate(-60deg); transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
transition: all 0.5s ease-out; }
.deg90 { transform: rotate(-25deg) translate(6em) rotate(-90deg); transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
a {
text-decoration:none;
color:black;
}
.fa-home:hover {color:tan;}
.fa-cog:hover {color:gray;}
.fa-comments:hover {color:teal;}
.fa-heart:hover {color:red;}
.open.deg0 { transform: rotate(0deg) translate(5.75em) rotate(-0deg); }
.open.deg30 { transform: rotate(30deg) translate(5.75em) rotate(-30deg); }
.open.deg60 { transform: rotate(60deg) translate(5.75em) rotate(-60deg); }
.open.deg90 { transform: rotate(90deg) translate(6em) rotate(-90deg);
}
#author {
font-family:'Squada One';
top: calc(50% + 50px);
left: calc(50% - 225px);
color:black;
font-size:40px;
text-decoration:none;
display: block;
position: absolute;
text-align:center;
}
#author a {
color: #43dd33;
text-decoration:none;
}
#author a:hover {
color: #000;
text-decoration:none;
}
(function($) {
(function($) {
$(function() {
$('#mainbtn').click(function(){
$('.deg0, .deg30, .deg60, .deg90').toggleClass('open')
});
});
})(jQuery);