Yo man keep it simple. All you need is your dear friend transform and some percentages for off canvas navigation.
A Pen by seth kontny on CodePen.
<link href='//fonts.googleapis.com/css?family=Raleway:400,200,600' rel='stylesheet' type='text/css'> | |
<header> | |
<a class="off-canvas-trigger" href="#"> | |
<span>S</span><span>E</span><span>T</span><span>H</span><span></span> | |
<span> K</span><span>O</span><span>N</span><span>T</span><span>N</span><span>Y</span><span></span> | |
</a> | |
<nav class="off-canvas"> | |
<ul class="off-canvas__list"> | |
<li><a class="off-canvas__link" href="">About</a></li> | |
<li><a class="off-canvas__link" href="">Resume</a></li> | |
<li><a class="off-canvas__link" href="">Projects</a></li> | |
<li><a class="off-canvas__link" href="">Writings</a></li> | |
<li><a class="off-canvas__link" href="">Contacts</a></li> | |
<li><a class="off-canvas__link" href="">Links</a></li> | |
<li><a class="off-canvas__link" href="">Other Links</a></li> | |
</ul> | |
</nav> | |
</header> | |
<main> | |
<section> | |
<h1>Persona Vox</h1> | |
</section> | |
<h1>SleepMedx Inc.</h1> | |
</section> | |
<h1>Solo collab</h1> | |
</main> | |
<footer> | |
</footer> |
$('.off-canvas-trigger').click(function() { | |
$('body').toggleClass('off-canvas-active'); | |
}); |
// ================================================= | |
// Modernizr | |
// ================================================= | |
// Modernizr mixin to create .modernizr selector | |
// http://codepen.io/sturobson/pen/xcdha | |
@mixin css($property, $support: true) { | |
@if $support == true { | |
.#{$property} & { | |
@content; | |
} | |
} | |
@else { | |
.no-#{$property} & { | |
@content; | |
} | |
} | |
} | |
/*---------------------------------------------- | |
=Variables | |
----------------------------------------------*/ | |
$accent: #ff6589; | |
$background: #013742; | |
// Would this look better if all the transitions had the same speed? | |
$shared-transition-speed: .6s; | |
// wave | |
// x | |
$trigger-active-style: wave; | |
// static - no extra styles applied | |
// traditional | |
// scale | |
// Future additions | |
// - push + rotate | |
// - fade | |
$content-push: scale; | |
/*---------------------------------------------- | |
=Resets | |
----------------------------------------------*/ | |
*, | |
*:before, | |
*:after { | |
box-sizing: border-box; | |
position: relative; | |
} | |
*:before, | |
*:after { pointer-events: none; } | |
html { | |
height: 100%; | |
font-family: 'Raleway', sans-serif; | |
text-align: left; | |
background: $background; | |
} | |
body { | |
height: 100%; | |
min-height: 100%; | |
margin: 0; | |
color: #fff; | |
} | |
/*---------------------------------------------- | |
=HTML | |
----------------------------------------------*/ | |
a { | |
text-decoration: none; | |
transition: .3s; | |
} | |
/*---------------------------------------------- | |
=Headings | |
----------------------------------------------*/ | |
h1 { | |
font-size: 7vw; | |
font-weight: 200; | |
letter-spacing: 0; | |
text-align: center; | |
color: #ff6589; | |
transform-origin: right top; | |
&:first-letter { | |
font-size: 9vw; | |
} | |
} | |
/*---------------------------------------------- | |
=Off Canvas Trigger | |
----------------------------------------------*/ | |
.off-canvas-trigger { | |
display: block; | |
padding: 1.75em 1em 1.75em 5em; | |
font-size: 1.75em; | |
background: rgba(#fff, .05); | |
color: #fff; | |
transition: .3s; | |
&:before { | |
position: absolute; | |
top: 22%; | |
left: 1em; | |
height: .5em; | |
width: .5em; | |
content: ''; | |
background: $accent; | |
box-shadow: | |
.5em 0 0 0 adjust-hue($accent, 20%), | |
1em 0 0 0 adjust-hue($accent, 40%), | |
1.5em 0 0 0 adjust-hue($accent, 60%), | |
2em 0 0 0 adjust-hue($accent, 80%), | |
2.5em 0 0 0 adjust-hue($accent, 100%), | |
0 1em 0 0 adjust-hue($accent, 0), | |
.5em 1em 0 0 adjust-hue($accent, 20%), | |
1em 1em 0 0 adjust-hue($accent, 40%), | |
1.5em 1em 0 0 adjust-hue($accent, 60%), | |
2em 1em 0 0 adjust-hue($accent, 80%), | |
2.5em 1em 0 0 adjust-hue($accent, 100%), | |
0 2em 0 0 adjust-hue($accent, 0), | |
.5em 2em 0 0 adjust-hue($accent, 20%), | |
1em 2em 0 0 adjust-hue($accent, 40%), | |
1.5em 2em 0 0 adjust-hue($accent, 60%), | |
2em 2em 0 0 adjust-hue($accent, 80%), | |
2.5em 2em 0 0 adjust-hue($accent, 100%); | |
transition: .45s; | |
} | |
&:hover { | |
background: rgba(#fff, .1); | |
&:before { | |
background: adjust-hue($accent, 100%); | |
box-shadow: | |
.5em 0 0 0 adjust-hue($accent, 80%), | |
1em 0 0 0 adjust-hue($accent, 60%), | |
1.5em 0 0 0 adjust-hue($accent, 40%), | |
2em 0 0 0 adjust-hue($accent, 20%), | |
2.5em 0 0 0 adjust-hue($accent, 0), | |
0 1em 0 0 adjust-hue($accent, 100%), | |
.5em 1em 0 0 adjust-hue($accent, 80%), | |
1em 1em 0 0 adjust-hue($accent, 60%), | |
1.5em 1em 0 0 adjust-hue($accent, 40%), | |
2em 1em 0 0 adjust-hue($accent, 20%), | |
2.5em 1em 0 0 adjust-hue($accent, 0), | |
0 2em 0 0 adjust-hue($accent, 100%), | |
.5em 2em 0 0 adjust-hue($accent, 80%), | |
1em 2em 0 0 adjust-hue($accent, 60%), | |
1.5em 2em 0 0 adjust-hue($accent, 40%), | |
2em 2em 0 0 adjust-hue($accent, 20%), | |
2.5em 2em 0 0 adjust-hue($accent, 0); | |
} | |
} | |
.off-canvas-active & { | |
background: rgba(#fff, .1); | |
&:before { | |
background: $accent; | |
@if $trigger-active-style == wave { | |
box-shadow: | |
.5em .5em 0 0 adjust-hue($accent, 20%), | |
1em 1em 0 0 adjust-hue($accent, 40%), | |
1.5em .5em 0 0 adjust-hue($accent, 60%), | |
2em 0 0 0 adjust-hue($accent, 80%), | |
2.5em .5em 0 0 adjust-hue($accent, 100%), | |
0 1em 0 0 adjust-hue($accent, 0), | |
.5em 1.5em 0 0 adjust-hue($accent, 20%), | |
1em 2em 0 0 adjust-hue($accent, 40%), | |
1.5em 1.5em 0 0 adjust-hue($accent, 60%), | |
2em 1em 0 0 adjust-hue($accent, 80%), | |
2.5em 1.5em 0 0 adjust-hue($accent, 100%), | |
0 2em 0 0 transparent, | |
.5em 2em 0 0 transparent, | |
1em 2em 0 0 transparent, | |
1.5em 2em 0 0 transparent, | |
2em 2em 0 0 transparent, | |
2.5em 2em 0 0 transparent; | |
} | |
@if $trigger-active-style == x { | |
box-shadow: | |
.5em .5em 0 0 adjust-hue($accent, 20%), | |
1em 1em 0 0 adjust-hue($accent, 40%), | |
1.5em .5em 0 0 adjust-hue($accent, 60%), | |
2em 0 0 0 adjust-hue($accent, 80%), | |
2.5em .5em 0 0 transparent, | |
0 2em 0 0 adjust-hue($accent, 0), | |
.5em 1.5em 0 0 adjust-hue($accent, 20%), | |
1em 2em 0 0 transparent, | |
1.5em 1.5em 0 0 adjust-hue($accent, 60%), | |
2em 2em 0 0 adjust-hue($accent, 80%), | |
2.5em 1.5em 0 0 transparent, | |
0 2em 0 0 transparent, | |
.5em 2em 0 0 transparent, | |
1em 2em 0 0 transparent, | |
1.5em 2em 0 0 transparent, | |
2em 2em 0 0 transparent, | |
2.5em 2em 0 0 transparent; | |
} | |
} | |
} | |
span { | |
color: $accent; | |
&:nth-child(2) { color: adjust-hue($accent, 20%); } | |
&:nth-child(3) { color: adjust-hue($accent, 40%); } | |
&:nth-child(4) { color: adjust-hue($accent, 60%); } | |
&:nth-child(5) { color: adjust-hue($accent, 80%); } | |
&:nth-child(6) { color: adjust-hue($accent, 100%); } | |
&:nth-child(7) { color: adjust-hue($accent, 120%); } | |
} | |
} | |
/*---------------------------------------------- | |
=Off Canvas | |
----------------------------------------------*/ | |
.off-canvas { | |
position: fixed; | |
top: 8.25em; | |
z-index: 2; | |
height: 100%; | |
min-height: 100%; | |
// Reinvestigate - Mobile Safari doesn't render the scroll bar here | |
// If the content is very tall consider condensing via height based media queries | |
overflow-y: scroll; | |
overflow-scrolling: touch; | |
// A little pushin for the cushion | |
// Does the scroll work as expected without padding-bottom? | |
padding: .75em 0 20em; | |
width: 75%; | |
background: rgba(#fff, .02); | |
transition: .6s; | |
@media (min-width: 37.5em) { | |
width: 50%; | |
} | |
@include css(csstransforms3d) { | |
transform: translate3d(-100%, 0, 0); | |
} | |
@include css(csstransforms3d, false) { | |
transform: translate(-100%); | |
} | |
@include css(csstransforms, false) { | |
left: -100%; | |
} | |
.off-canvas-active & { | |
@include css(csstransforms3d) { | |
transform: translate3d(0, 0, 0); | |
} | |
@include css(csstransforms3d, false) { | |
transform: translate(0); | |
} | |
@include css(csstransforms, false) { | |
left: 0; | |
} | |
} | |
} | |
.off-canvas__list { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
.off-canvas__link { | |
display: block; | |
z-index: 2; | |
padding: 2em; | |
letter-spacing: 0; | |
color: $accent; | |
&:first-letter { | |
font-size: 2em; | |
} | |
&:before { | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: -1; | |
width: 100%; | |
height: 100%; | |
content: ''; | |
transition: .3s; | |
} | |
&:hover { | |
letter-spacing: .2em; | |
color: adjust-hue($accent, 30%); | |
&:before { | |
box-shadow: | |
inset .3em 0 0 0 $accent, | |
inset .6em 0 0 0 $background, | |
inset .7em 0 0 0 adjust-hue($accent, 20%); | |
} | |
} | |
} | |
/*---------------------------------------------- | |
=Main | |
----------------------------------------------*/ | |
main { | |
overflow: hidden; | |
} | |
section { | |
transition: .6s; | |
@if $content-push == traditional { | |
.off-canvas-active & { | |
@include css(csstransforms3d) { | |
transform: translate3d(50%, 0, 0); | |
} | |
@include css(csstransforms3d, false) { | |
transform: translate(50%); | |
} | |
@include css(csstransforms, false) { | |
left: 50%; | |
} | |
} | |
} | |
@if $content-push == scale { | |
transform-origin: right center; | |
.off-canvas-active & { | |
@include css(csstransforms) { | |
transform: scale(.9); | |
} | |
@include css(csstransforms, false) { | |
opacity: .8; | |
} | |
} | |
} | |
} |
Yo man keep it simple. All you need is your dear friend transform and some percentages for off canvas navigation.
A Pen by seth kontny on CodePen.