A Pen by Michael Abraham Vieth.

Full-Screen-Nav.markdown

Full Screen Nav

I wanted to make something to tesst out Sass directives so I created this full screen nav animate in/out with the Sass @for directive.

At the moment the sizing is a bit wack on mobile - something to do with window.innerHeight not getting the mobile viewport size

Forked from Rachel Smith's Pen Full Screen Nav.

A Pen by Michael Abraham Vieth on CodePen.

License.

index.html

<div id="nav-trigger" class="nav-trigger open">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>
<nav id="nav" class="out">
  <ul>
    <li><span class="nav-label">Home</span></span></li>
    <li><span class="nav-label">About</span></li>
    <li><span class="nav-label">Work</span></li>
    <li><span class="nav-label">Blog</span></li>
    <li><span class="nav-label">Contact</span></li>
  </ul>
</nav>
<section id="header" class="header">
  <h1 id="heading">Full Screen Nav</h1>
</section>
<section class="content">
  <p>We're going aerial pingpong no dramas as cross as a mickey mouse mate. Flat out like a bities no dramas as cross as a wobbly. Mad as a bush bash as dry as a kindie. As stands out like ford also grab us a chuck a sickie. Built like a moolah bloody khe sanh. Get a dog up ya chokkie how as cunning as a garbo. Lets get some show pony flamin lets throw a roadie. Come a sheila to come a cab sav.</p>
  
  <p>Gutful of servo bloody as busy as a moolah. Built like a ropeable piece of piss built like a relo. Lets throw a two up piece of piss she'll be right brick sh*t house. Built like a dunny piece of piss lets throw a esky. She'll be right struth my built like a tucker. rage on bloody built like a garbo.</p>
  
  <p>It'll be dinky-di come a brumby. He hasn't got a shit house with shazza got us some buckley's chance. Trent from punchy barbie where shazza got us some chuck a sickie. Mad as a swagger my hottie. As busy as a mate's rate mate stands out like a trackie dacks. As busy as a bathers also grab us a dipstick.</p>
  
  <p class="credit">This placeholder text is from <a href="http://boganipsum.com">Bogan Ipsum</a></p>
</section>

script.js

// selected elements
var navTrigger = document.getElementById('nav-trigger');
var nav = document.getElementById('nav');
var header = document.getElementById('header');
var heading = document.getElementById('heading');
var labels = document.getElementsByClassName('nav-label');

// sizing
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var fontSize = windowHeight*0.1;
var headingSize = windowWidth*0.1;

resize();

// Event Listening
navTrigger.addEventListener('click', navToggle);
window.addEventListener('resize', resize);

function resize() {
  windowHeight = window.innerHeight;
  windowWidth = window.innerWidth;
  fontSize = windowHeight*0.1;
  headingSize = windowWidth*0.1;
  if(headingSize > windowHeight*0.3) headingSize = windowHeight*0.3; 
  
  for(var i = 0; i < labels.length; i++) {
    labels[i].style.fontSize = fontSize+'px';
    labels[i].style.height = fontSize+'px';
    labels[i].style.marginTop = '-'+fontSize*0.6+'px';
  }

  header.style.height = windowHeight+'px';
  heading.style.fontSize = headingSize+'px';
  heading.style.height = headingSize+'px';
  heading.style.marginTop = '-'+headingSize*0.6+'px';
  
}

function navToggle(e) {
  var closed = (navTrigger.className.indexOf('close') > 0); 
  if(closed) {
    navTrigger.className = 'nav-trigger open';
    nav.className = 'out';
  } else {
    navTrigger.className = 'nav-trigger close';
    nav.className = 'in';
  }
}

window.onload = resize();

style.scss

@import "bourbon";
@import url(http://fonts.googleapis.com/css?family=Patua+One);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

// vars
$headings: 'Patua One', cursive;
$white: #fff;
$grey-black: #222;
$olive: #364e41;

body {
  background: #fff;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
}

p {
  line-height: 1.5;
}

// Nav Button
.nav-trigger {
  position: fixed;
  width: 110px;
  height: 98px;
  right: 0px;
  top: 0px;
  cursor: pointer;
  z-index: 200;
  @include transform-origin(110px 0px);
  @include transform(scale(0.6));
  @include transition(background 0.3s linear);
}

.nav-trigger.open {
  background: $grey-black;
}

.nav-trigger.close {
  background: transparent;
}

.line {
  display: block;
  position: absolute;
  width: 80px;
  height: 8px;
  background: $white;
  left: 15px;
  @include transform-origin(0px 4px);
  @include transition (opacity 0.3s $ease-in-out-cubic 0s, transform 0.24s $ease-in-out-cubic 0s);
}

@for $i from 1 through 3 {
  .line:nth-child(#{$i}) {
    top: 16px + (($i)-1)*28;
  }
}

.close .line:nth-child(1) {
  @include transform(translateX(11px) rotate(45deg));
}

.close .line:nth-child(2) {
  opacity: 0;
}

.close .line:nth-child(3) {
  @include transform(translateX(11px) rotate(-45deg));
}

// Full page Navigation  
nav {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
}

nav.out {
  pointer-events: none;
}

nav.in {
  pointer-events: auto;
}

nav ul, li {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
  cursor: pointer;
}

nav ul {
  height: 100%;
  width: 100%;
  position: absolute;
}

nav li {
  height: 20%;
  position: relative;
  background: $grey-black;
  color: $white;
  font-family: $headings;
}

nav li:hover {
  background: $olive;
}

@for $i from 1 through 5 {
  nav.in li:nth-child(#{$i}) {
    @include transition(transform 0.5s $ease-out-cubic (0.1s*$i), opacity 0.5s linear (0.1s*$i));
  }
}

@for $i from 5 through 1 {
  nav.out li:nth-child(#{$i}) {
    @include transition(transform 0.3s $ease-in-cubic (0.05s*(5-$i)), opacity 0.3s linear (0.05s*(5-$i)));
  }
}

nav.out li {
  @include transform(translateY(300%));
  opacity: 0;
}

nav.in li {
  @include transform(translateY(0));
  opacity: 1;
}

.nav-label {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  height: 16px;
  top: 50%;
  margin-top: -8px;
  text-transform: uppercase;
}

// site content
.header {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/bg.jpg);
  background-size: cover;
  position: relative;
  width: 100%;
  min-height: 100%;
  top: 0px;
}

.header h1 {
  width: 100%;
  color: #fff;
  position: absolute;
  margin: 0;
  font-family: $headings;
  text-align: center;
  display: block;
  top: 50%;
}

.content {
  @include box-sizing(border-box);
  max-width: 600px;
  padding: 20px;
  margin: 0 auto;
}

.credit {
  color: #364e41;
}

.credit a {
  color: #364e41;
}