%body
%header
%button{:class => "nav-button button-lines button-lines-x close", :type => "button", :role => "button", "aria-label" => "Toggle menu"}
%span{:class => "lines"}
%main
.container
%h1 3D Side Navigation
%nav{:class => "nav-wrapper"}
%ul{:class => "nav"}
%li{:class => "active"}
%a{:href => "#"} Page 1
%li
%a{:href => "#"} Page 2
%li
%a{:href => "#"} Page 3
%li
%a{:href => "#"} Page 4
%span{:class => "nav-marker color-1"}
View Compiled
//== Variables
//
$color-white: #fff;
$color-white-darker: darken($color-white, 5%);
$color-white-darken: darken($color-white, 15%);
$header-height: 80px;
$nav-toggle-size: 2rem;
$nav-toggle-transition-speed: .3s;
$nav-transition-speed: .6s;
$nav-width: 25vw;
$zindex-header: 500;
//== Reset styles
//
*, *:before, *:after {
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-size: 18px;
}
body {
background-color: #333;
}
h1, h2, h3, h4, h5, h6 {
color: $color-white-darker;
}
h1 { font-size: 2.441rem; }
a {
color: $color-white-darker;
text-decoration: none;
&:focus,
&:hover {
text-decoration: underline;
}
}
header {
height: $header-height;
left: 0;
padding: 0.5rem;
position: fixed;
text-align: right;
top: 0;
transition: transform $nav-transition-speed;
width: 100%;
z-index: $zindex-header;
.nav-visible & {
//transform: translateX(-$nav-width);
}
}
main {
background-color: #485274;
height: 100vh;
padding-top: $header-height;
transform-origin: left center;
transition: transform $nav-transition-speed 50ms;
.nav-visible & {
//transform: perspective(1000px) rotateY(1deg);
//transform: translateX(-$nav-width);
}
}
.container {
margin: 0 auto;
width: 80%;
}
.nav-button {
text-transform: uppercase;
}
.nav-wrapper {
background-color: #343c55;
box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.75);
height: 100%;
padding-top: $header-height;
perspective: 1000px;
position: fixed;
right: 0;
top: 0;
transform: translateX(100%);
transition: transform $nav-transition-speed, visibility $nav-transition-speed;
visibility: hidden;
width: $nav-width;
.nav-visible & {
transform: translateX(0);
visibility: visible;
}
}
.nav {
position: relative;
transform: rotateY(90deg);
transform-origin: left center;
transition: transform $nav-transition-speed;
.nav-visible & {
transform: rotateY(0deg);
}
li {
&.active {
a {
background-color: #212635;
}
}
}
a {
display: block;
line-height: 1.4;
padding: 0.7em 0.5em 0.7em 1.4em;
text-transform: uppercase;
&:focus,
&:hover {
background-color: #2b3145;
text-decoration: none;
}
}
}
//== Nav active marker
//
.nav-marker {
background-color: currentColor;
height: 2.8rem;
position: absolute;
right: 0;
top: $header-height;
width: 3px;
&:before {
border: 5px solid transparent;
border-right-color: inherit;
content: "";
height: 0;
position: absolute;
right: 3px;
top: 50%;
transform: translateY(-50%);
width: 0;
}
}
.color-1 {
color: deeppink;
}
//== Menu toggle (hamburgen)
//
@mixin button-lines {
background: $color-white;
border-radius: $nav-toggle-size/10;
display: inline-block;
height: $nav-toggle-size/10;
width: $nav-toggle-size;
&:hover {
background: #000;
}
}
.button-lines {
background: transparent;
border: none;
cursor: pointer;
display: inline-block;
padding: $nav-toggle-size/2 $nav-toggle-size/4;
user-select: none;
}
.lines {
@include button-lines;
position: relative;
&:after,
&:before {
@include button-lines;
content: "";
left: 0;
position: absolute;
}
&:after {
top: $nav-toggle-size/4;
}
&:before {
top: -$nav-toggle-size/4;
}
}
.button-lines-x {
.lines {
transition: background .3s ease;
&:after,
&:before {
transform-origin: 50% 50% 0;
transition: top .3s .4s ease, transform .3s ease;
}
}
.nav-visible & {
.lines {
background: transparent;
&:after,
&:before {
top: 0;
transition: top .3s ease, transform .3s .3s ease;
}
&:after {
transform: rotate3d(0, 0, 1, 45deg);
}
&:before {
transform: rotate3d(0, 0, 1, -45deg);
}
}
}
}
View Compiled