@mixin keyframes($animationName) { @-webkit-keyframes #{$animationName} { @content; } @-moz-keyframes #{$animationName} { @content; } @-o-keyframes #{$animationName} { @content; } @keyframes #{$animationName} { @content; } } .quick-nav { position: fixed; z-index: $zindex-top + 3; top: 50%; right: 10px; margin-top: -230px; pointer-events: none; .quick-nav-bg { /* this is the stretching navigation background */ position: absolute; z-index: $zindex-top + 2; top: 0; right: 0; width: 60px; height: 60px; border-radius: 30px !important; background: #36C6D3; box-shadow: 0 1px 4px rgba(#000, .2); @include transition('height .2s, box-shadow .2s'); } &.nav-is-visible { pointer-events: auto; } &.nav-is-visible .quick-nav-bg { height: 100%; box-shadow: 0 6px 30px rgba(#000, .2); } } .quick-nav-trigger { position: absolute; z-index: $zindex-top + 3; top: 0; right: 0; height: 60px; width: 60px; border-radius: 50% !important; overflow: hidden; white-space: nowrap; color: transparent; pointer-events: auto; span, span::after, span::before { /* this is the hamburger icon */ position: absolute; width: 16px; height: 2px; background-color: #ffffff; } span { /* middle line of the hamburger icon */ @include transition(background-color .2s); left: 50%; top: 50%; bottom: auto; right: auto; @include transform(translateX(-50%) translateY(-50%)); } span::after, span::before { /* top and bottom lines of the hamburger icon */ content: ''; top: 0; left: 0; @include backface-visibility(hidden); @include transition(transform .2s); } span::before { @include transform(translateY(-6px)); } span::after { @include transform(translateY(6px)); } .no-touch &:hover ~ .quick-nav-bg { box-shadow: 0 6px 30px rgba(#000, .2); } .nav-is-visible & { span { background-color: transparent; } span::before { @include transform(rotate(-45deg)); } span::after { @include transform(rotate(45deg)); } } } .quick-nav ul { position: relative; z-index: $zindex-top + 3; padding: 60px 0 0; visibility: hidden; @include transition(visibility .3s); text-align: right; list-style: none; > li { a { position: relative; display: block; height: 50px; line-height: 50px; padding: 0 calc(1em + 60px) 0 1em; font-size: 1.4rem; @include transition(color .2s); &:hover { text-decoration: none; > span { text-decoration: none; } } > i { /* navigation item icons */ content: ''; position: absolute; height: 16px; width: 16px; font-size: 18px; right: 24px; top: 16px; color: darken(#fff, 8%); } &::before { /* line visible next to the active navigation item */ content: ''; position: absolute; width: 3px; height: 16px; top: 50%; right: 60px; @include transform(translateX(3px) translateY(-50%) scaleY(0)); background-color: #FF3F3F; } } span { /* navigation item labels */ color: darken(#fff, 8%); font-weight: 400; display: block; opacity: 0; @include transform(translateX(-25px)); } &:last-child { padding-bottom: 10px; } } } .quick-nav.nav-is-visible ul { visibility: visible; a::after { /* navigation item icons */ @include transform(translateY(-50%) scale(1)); @include animation(scaleIn .15s backwards); @include transition(opacity .2s); } a:hover { &::after { opacity: 1; } &::before { @include transform(translateX(3px) translateY(-50%) scaleY(2)); @include transition(transform .15s .3s); } > span { color: darken(#fff, 0); } > i { color: darken(#fff, 2%); } } span { opacity: 1; @include transform(translateX(0)); @include animation(slideIn .15s backwards); @include transition(transform .2s); } .no-touch & a:hover { &::after { opacity: 1; } span { @include transform(translateX(-5px)); } } } .quick-nav-overlay { display: none; top: 0; bottom: 0; right: 0; left: 0; position: fixed; z-index: $zindex-top + 1; background: rgba(#000, 0); } .quick-nav.nav-is-visible + .quick-nav-overlay { background: rgba(#000, 0.8); display: block; -webkit-transition: background .7s ease-out; -moz-transition: background .7s ease-out; -o-transition: background .7s ease-out; transition: background .7s ease-out; } @media (max-width: $screen-sm-max) { /* 991px */ .quick-nav { top: 120px; margin-top: 0; } }