Skip to content

Instantly share code, notes, and snippets.

@jesusr

jesusr/_offnavigation.sass

Last active August 29, 2015 14:13
Show Gist options
  • Save jesusr/e554fad4626d96ef695a to your computer and use it in GitHub Desktop.
Save jesusr/e554fad4626d96ef695a to your computer and use it in GitHub Desktop.
Download ZIP
Off Canvas navigation animated
Raw
_offnavigation.sass
@import "compass/utilities/general/clearfix"
$color: white
$blue: #158fef
$light-blue: #2196F3
$indigo: #283593
$animation: 0.6s
$scale: 1
header
min-height: 350px
background: lighten($light-blue,20%)
display: table
width: 100%
h1
font-size: 100px
color: #f7f7f7
text-align: center
display: table-cell
vertical-align: middle
+keyframes(dash-in)
0%
stroke-dashoffset: 240
40%
stroke-dashoffset: 240
100%
stroke-dashoffset: 0
+keyframes(dash-out)
0%
stroke-dashoffset: 0
40%
stroke-dashoffset: 240
100%
stroke-dashoffset: 240
+keyframes(rotate-out)
0%
transform: rotate(0deg)
40%
transform: rotate(180deg)
100%
transform: rotate(360deg)
+keyframes(rotate-in)
0%
transform: rotate(360deg)
40%
transform: rotate(180deg)
100%
transform: rotate(0deg)
+keyframes(bun-top-out)
0%
left: 0
top: 0
transform: rotate(0deg)
20%
left: 0
top: 0
transform: rotate(15deg)
80%
left: -5px
top: 0
transform: rotate(-60deg)
100%
left: -5px
top: 1px
transform: rotate(-45deg)
+keyframes(bun-bot-out)
0%
left: 0
transform: rotate(0deg)
20%
left: 0
transform: rotate(-15deg)
80%
left: -5px
transform: rotate(60deg)
100%
left: -5px
transform: rotate(45deg)
+keyframes(bun-top-in)
0%
left: -5px
bot: 0
transform: rotate(-45deg)
20%
left: -5px
bot: 0
transform: rotate(-60deg)
80%
left: 0
bot: 0
transform: rotate(15deg)
100%
left: 0
bot: 1px
transform: rotate(0deg)
+keyframes(bun-bot-in)
0%
left: -5px
transform: rotate(45deg)
20%
left: -5px
bot: 0
transform: rotate(60deg)
80%
left: 0
bot: 0
transform: rotate(-15deg)
100%
left: 0
transform: rotate(0deg)
+keyframes(nav-icon-fill-in)
0%
width: 0
left: 36px
40%
width: 0
left: 40px
80%
width: 36px
left: -6px
100%
width: 36px
left: 0px
+keyframes(nav-icon-fill-out)
0%
width: 36px
left: 0px
20%
width: 42px
left: -6px
40%
width: 0
left: 40px
100%
width: 0
left: 36px
*, *:before, *:after
box-sizing: border-box
.nav-mobile-button
position: fixed
top: 0
right: 0
display: inline-block
z-index: 999
.nav-icon-wrapper
transform: scale($scale)
margin: 30px
position: relative
display: block
width: 68px
height: 68px
background: $blue
border-radius: 50%
-webkit-touch-callout: none
user-select: none
+box-shadow(0 0 5px $blue)
&.is-open
.path
+animation(dash-in $animation linear normal)
+animation-fill-mode(forwards)
.animate-path
+animation(rotate-in $animation linear normal)
+animation-fill-mode(forwards)
.nav-icon-bun-top
+animation(bun-top-out $animation linear normal)
+animation-fill-mode(forwards)
.nav-icon-bun-bot
+animation(bun-bot-out $animation linear normal)
+animation-fill-mode(forwards)
.nav-icon-filling
+animation(nav-icon-fill-out $animation linear normal)
+animation-fill-mode(forwards)
&.is-closed
.path
+animation(dash-out $animation linear normal)
+animation-fill-mode(forwards)
.animate-path
+animation(rotate-out $animation linear normal)
+animation-fill-mode(forwards)
.nav-icon-bun-top
+animation(bun-top-in $animation linear normal)
+animation-fill-mode(forwards)
.nav-icon-bun-bot
+animation(bun-bot-in $animation linear normal)
+animation-fill-mode(forwards)
.nav-icon-filling
+animation(nav-icon-fill-in $animation linear normal)
+animation-fill-mode(forwards)
.path-nav-icon
position: absolute
top: 0
left: 0
height: 68px
width: 68px
mask: url(#mask)
-webkit-mask-box-image: url(../images/mask.svg)
.animate-path
position: absolute
top: 0
left: 0
width: 68px
height: 68px
.path-rotation
height: 34px
width: 34px
margin: 34px 34px 0 0
transform: rotate(0deg)
transform-origin: 100% 0
&:before
content: ''
display: block
width: 30px
height: 34px
margin: 0 4px 0 0
background: $color
.nav-icon
position: absolute
padding: 20px 16px
height: 68px
width: 68px
.nav-icon-container
position: relative
height: 28px
width: 36px
.nav-icon-bun-top,
.nav-icon-bun-bot,
.nav-icon-filling
position: absolute
display: block
height: 4px
width: 36px
border-radius: 2px
background: $color
.nav-icon-bun-top
top: 0
transform-origin: 34px 2px
.nav-icon-bun-bot
bottom: 0
transform-origin: 34px 2px
.nav-icon-filling
@include transition(all,($animation/2.5),ease-in-out)
.nav-icon-filling
top: 12px
.nav-icon-circle
position: absolute
top: 0
left: 0
width: 68px
height: 68px
.svg-circle
width: 68px
height: 68px
.path
stroke-dasharray: 240
stroke-dashoffset: 240
stroke-linejoin: round
button
position: fixed
z-index: 9999
right: 1em
top: 1em
nav.main
position: fixed
top: 0
width: 100%
display: block
+transform(translateX(-100%))
+transition(transform 1s)
&.active
+transform(translateX(-10%))
ul.menu
+box-shadow(5px -5px 15px 5px #888)
ul.menu
width: 100%
padding: 0
margin: 0
position: absolute
list-style: none
li
+transition()
background-color: $indigo
margin: 0
padding: 0
border-bottom: 1px white solid
width: 100%
a
color: white
display: block
text-decoration: none
box-sizing: border-box
width: 100%
text-align: center
.wrapper
padding: 2em
max-width: 1078px
margin: 0 auto
section
font-size: 50px
Raw
example.html
<header><h1>Title</h1></header>
<nav class="main">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Section</a></li>
<li><a href="">Opcion</a></li>
<li><a href="">Otros</a></li>
<li><a href="">Another</a></li>
<li><a href="">And another</a></li>
</ul>
</nav>
<div class="wrapper">
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam ipsum culpa, possimus vel voluptatibus impedit. Ipsam, quo porro magni quae, doloremque, sed ex vitae officia harum molestias quas. Similique, unde.</section>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae voluptas laboriosam nostrum! Sed blanditiis tenetur excepturi at, quis suscipit illo eligendi aut perferendis velit labore, maxime reiciendis odio rerum, nulla?</section>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis quisquam natus consectetur. Perspiciatis accusamus, inventore dolorum, magni non maxime error soluta saepe maiores excepturi in totam nulla quibusdam dolore. Quas!</section>
</div>
<div class="nav-mobile-button"><div class="nav-icon-wrapper is-closed"><div class="nav-icon"><div class="nav-icon-container"><span class="nav-icon-bun-top"></span> <span class="nav-icon-filling"></span> <span class="nav-icon-bun-bot"></span> </div> </div> <!-- svg ring containter --> <div class="nav-icon-circle"> <svg class="svg-circle"> <path class="path" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="4" d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2" /> </svg> </div> <!-- the masked path that animates the fill to the ring --> <svg width="0" height="0"> <mask id="mask"> <path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ff0000" stroke-miterlimit="10" stroke-width="4" d="M 34 2 c 11.6 0 21.8 6.2 27.4 15.5 c 2.9 4.8 5 16.5 -9.4 16.5 h -4" /> </mask> </svg> <div class="path-nav-icon"> <div class="animate-path"> <div class="path-rotation"></div> </div> </div> </div> </div>
Raw
offcanvas.js
$(function(){
var n = $('ul.menu li').length, h = $(window).height();
$('ul.menu li a').css('height',h/n+'px');
$('ul.menu li a').css('line-height',h/n+'px');
$('ul.menu li a').css('font-size',h/n*0.8);
var isClosed = false;
$('.nav-icon-wrapper').click(function () {
if (isClosed == true) {
$(this).removeClass('is-open').addClass('is-closed');
isClosed = false;
} else {
$(this).removeClass('is-closed').addClass('is-open');
isClosed = true;
}
$('nav.main').toggleClass('active');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment