<div id="nav" class="wrapcircles closed">
<div class="circle c-1"><span><a class="link" href="#"></a></span></div>
<div class="circle c-2"><span><a class="link" href="#"></a></span></div>
<div class="circle c-3"><span><a class="link" href="https://codepen.io/Chrisstar"></a></span></div>
<div class="circle c-4"><span><a class="link" href="https://www.twitter.com/DaChrisstar"></a></span></div>
<div id="click" class="circle c-5"><span><a class="link"></a></span></div>
</div>
$radius: 15em;
.circle {
position: absolute;
/*top: -$radius;
left: -$radius;*/
top: 0;
left: 0;
width: $radius;
height: $radius;
transition: width 0.3s, height 0.3s, transform 0.3s;
transform-origin: top left;
border-bottom-right-radius: 100%;
/*transition: top 0.3s, left 0.3s;
&:hover {
top: -1em;
left: -1em;
}*/
.link {
width: 100%;
height: 100%;
display: block;
}
.link::before {
position: absolute;
display: block;
color: white;
font-family: 'FontAwesome';
font-size: 1.5em;
top: 1em;
right: 1em;
}
}
.wrapcircles.closed{
.circle {
transform: rotate(90deg);
width: $radius / 3;
height: $radius / 3;
transition-delay: 0s;
}
#click {
transform: none;
transition: all 0.3s;
span {
top: (18em / 16);
right: 2em;
&::after {
transform: rotate(90deg);
}
&::before {
transform: none;
}
}
}
}
#click {
cursor: pointer;
}
#click span {
transition: bottom 0.3s, left 0.3s;
display: block;
width: 30px;
height: 30px;
top: 1em;
right: 1em;
position: absolute;
&::before, &::after{
display: block;
position: absolute;
font-family: inherit;
content: '';
width: 30px;
height: 8px;
transition: transform 0.3s;
top: 11px;
border-radius: 3px;
background: white;
}
&::before {
transform: rotate(-45deg);
}
&::after{
transform: rotate(45deg);
}
}
.c-1 {
background: #43A047;
transition-delay: 0.1s, 0.1s, 0.1s;
transform: rotate((90deg/5) * 1);
.link::before {
transform: rotate((90deg/5) * -1);
content: '\f0f3';
}
}
.c-2 {
background: #388E3C;
transition-delay: 0.2s, 0.2s, 0.2s;
transform: rotate((90deg/5) * 2);
.link::before {
transform: rotate((90deg/5) * -2);
content: '\f013';
}
}
.c-3 {
transition-delay: 0.3s,0.3s, 0.3s;
background: #2E7D32;
transform: rotate((90deg/5) * 3);
.link::before {
transform: rotate((90deg/5) * -3);
content: '\f1cb';
}
}
.c-4 {
transition-delay: 0.4s, 0.4s, 0.4s;
background: #1B5E20;
transform: rotate((90deg/5) * 4);
.link::before {
transform: rotate((90deg/5) * -4);
content: '\f099';
}
}
.c-5 {
background: #4CAF50;
z-index: -1;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
View Compiled
$("#click").click(function(){
$("#nav").toggleClass("closed");
});
This Pen doesn't use any external CSS resources.