HTML
<!DOCTYPE html>
<div class="scene">
<div class="menu">
<input type="checkbox" id="open-menu" name="open-menu">
<div class="menu__layer top">
<label for="open-menu"><span class="fa fa-bars icon"></span><span class="layer__content">Home</span></label>
</div>
<div class="menu__layer middle">
<label for="open-menu"><span class="layer__content">Portfolio</span></label>
</div>
<div class="menu__layer bottom">
<label for="open-menu"><span class="layer__content">Contact</span></label>
</div>
</div>
</div>
SCSS
/***** [Variables] *****/
/* Geometry */
$layer-size: 200px;
$top-height: 120px;
$middle-height: 80px;
$bottom-height: 40px;
/* Colors */
$color-background: #C8F7C5;
$color-top: #E08283;
$color-middle: #81CFE0;
$color-bottom: #68C3A3;
$color-font: #eee;
/* Text */
$font: 'Arial';
$icon-size: $layer-size / 2;
$text-size: $layer-size / 6;
/* Mixins */
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@mixin shadow {
-webkit-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
}
/***** [Setup] *****/
body {
font-family: $font;
background: $color-background;
}
.scene {
@include center;
width: $layer-size;
height: $layer-size;
perspective: 1800px;
}
.menu {
position: relative;
width: inherit;
height: inherit;
transform: rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
/***** [Menu open state] *****/
input[type="checkbox"] {
visibility: hidden;
}
/* Show each layer's text */
input[type="checkbox"]:checked ~ &__layer {
label .layer__content {
visibility: visible;
}
}
input[type="checkbox"]:checked ~ .top {
transform: translate3d(-$layer-size, 0, $bottom-height);
/* Hide the menu icon */
label .icon {
visibility: hidden;
}
}
input[type="checkbox"]:checked ~ .middle {
transform: translate3d(0, 0, $bottom-height);
}
input[type="checkbox"]:checked ~ .bottom {
transform: translate3d($layer-size, 0, $bottom-height);
/* Hide the shadow */
&:after {
visibility: hidden;
}
}
/**** [Hover state] *****/
&:hover {
.menu__layer {
&.top {
transform: translateZ($top-height);
}
&.middle {
transform: translateZ($middle-height);
}
&.bottom {
transform: translateZ($bottom-height);
/* Show the shadow */
&:after {
visibility: visible;
}
}
}
}
/***** [Layer styling] *****/
&__layer {
position: absolute;
width: inherit;
height: inherit;
transition: all 200ms ease;
label {
position: relative;
display: inline-block;
width: inherit;
height: inherit;
cursor: pointer;
.icon,
.layer__content {
@include center;
color: $color-font;
}
.icon {
font-size: $icon-size;
}
.layer__content {
visibility: hidden;
font-size: $text-size;
font-weight: bold;
}
}
&.top {
background-color: $color-top;
z-index: 3;
}
&.middle {
background-color: $color-middle;
z-index: 2;
}
&.bottom {
background-color: $color-bottom;
z-index: 1;
/* Shadow */
&:after {
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
content: "\00a0";
visibility: hidden;
@include shadow;
}
}
}
}
