<div class="dots-wrapper">
<div class="dots-menu">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
/* variables */
$color: #4504fe;
$dots-size: 5px;
$dots-gutter: 5px;
@import "compass";
@import "bourbon";
.dots-wrapper {
width: ($dots-size*3) + ($dots-gutter*2);
height: ($dots-size*3) + ($dots-gutter*2);
top: 50%;
left: 50%;
position: absolute;
@include transform(translate(-50%, -50%));
}
.dots-menu {
cursor: pointer;
@include transform-origin(center);
@include clearfix();
@include transition(all 0.3s $ease-in-back);
> span {
@include transition(all 0.3s 0.4s $ease-in-out-quint);
@include transform-origin(center);
content: '';
display: block;
width: $dots-size;
height: $dots-size;
background-color: $color;
float: left;
&:nth-of-type(3n+1) {
clear: left;
}
&:nth-of-type(5) {
margin: $dots-gutter;
@include transition-delay(0.2s);
&:before,
&:after {
@include transform(translate(-50%, -50%));
@include transition(all 0.2s 0.2s $ease-in-out-quint);
position: absolute;
content: '';
display: block;
left: 50%;
top: 50%;
width: $dots-size;
height: $dots-size;
background-color: $color;
z-index: 2;
}
}
&:nth-of-type(1n),
&:nth-of-type(6) {
margin: $dots-gutter 0 0;
}
&:nth-of-type(5) {
margin: $dots-gutter;
}
&:first-of-type,
&:nth-of-type(3),
&:nth-of-type(7),
&:nth-of-type(9) {
margin: 0;
}
&:nth-of-type(2),
&:nth-of-type(8) {
margin: 0 $dots-gutter;
}
}
body.site-toggled &,
&:hover {
> span {
&:nth-of-type(2),
&:nth-of-type(4),
&:nth-of-type(6),
&:nth-of-type(8) {
@include transform(rotateY(180deg));
opacity: 0;
}
&:nth-of-type(1),
&:nth-of-type(3),
&:nth-of-type(7),
&:nth-of-type(9) {
@include transform(rotateX(180deg));
opacity: 0;
}
&:nth-of-type(5) {
background-color: transparent;
}
&:nth-of-type(5):before {
width: 100%;
height: $dots-size;
}
&:nth-of-type(5):after {
height: 100%;
width: $dots-size;
}
}
}
body.site-toggled & {
@include transform(rotate(-45deg));
>span:nth-of-type(5) {
background-color: transparent;
}
>span:nth-of-type(5):before {
height: $dots-size/4;
min-height: 3px;
}
>span:nth-of-type(5):after {
width: $dots-size/4;
min-width: 3px;
}
}
}
/* not important */
body {
background-color: #FFF;
@include transition(all 0.3s ease);
}
body.site-toggled {
background-color: darken(#FFF, 5);
}
View Compiled
$('.dots-wrapper').click(function(){
$('body').toggleClass('site-toggled');
});
This Pen doesn't use any external CSS resources.