Vertical Layout with Navigation

index.html

<nav class="nav">
  <div class="burger">
    <div class="burger__patty"></div>
  </div>

  <ul class="nav__list">
    <li class="nav__item">
      <a href="#1" class="nav__link c-blue"><i class="fa fa-camera-retro"></i></a>
    </li>
    <li class="nav__item">
      <a href="#2" class="nav__link c-yellow scrolly"><i class="fa fa-bolt"></i></a>
    </li>
    <li class="nav__item">
      <a href="#3" class="nav__link c-red"><i class="fa fa-music"></i></a>
    </li>
    <li class="nav__item">
      <a href="#4" class="nav__link c-green"><i class="fa fa-paper-plane"></i></a>
    </li>
  </ul>
</nav>

<section class="panel b-blue" id="1">
  <article class="panel__wrapper">
    <div class="panel__content">
      <h1 class="panel__headline"><i class="fa fa-camera-retro"></i>&nbsp;Cameras</h1>
      <div class="panel__block"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea molestias ducimus, eos asperiores, ab officia sint nostrum quia, corporis officiis id praesentium expedita numquam ad non error optio est in.</p>
    </div>
  </article>
</section>
<section class="panel b-yellow" id="2">
  <article class="panel__wrapper">
    <div class="panel__content">
      <h1 class="panel__headline"><i class="fa fa-bolt"></i>&nbsp;Lightning</h1>
      <div class="panel__block"></div>
      <p>Paleo authentic mlkshk taxidermy, vinyl meditation lomo drinking vinegar sartorial raw denim Thundercats bitters selvage listicle. Keffiyeh Williamsburg gastropub McSweeney's.</p>
    </div>
  </article>
</section>
<section class="panel b-red" id="3">
  <article class="panel__wrapper">
    <div class="panel__content">
      <h1 class="panel__headline"><i class="fa fa-music"></i>&nbsp;Music</h1>
      <div class="panel__block"></div>
      <p>Beard sriracha kitsch literally, taxidermy normcore aesthetic wayfarers salvia keffiyeh farm-to-table sartorial gluten-free mlkshk. Selvage normcore 3 wolf moon, umami Kickstarter artisan meggings cardigan drinking vinegar bicycle rights.</p>
    </div>
  </article>
</section>
<section class="panel b-green" id="4">
  <article class="panel__wrapper">
    <div class="panel__content">
      <h1 class="panel__headline"><i class="fa fa-paper-plane"></i>&nbsp;Paper Planes</h1>
      <div class="panel__block"></div>
      <p>90's wayfarers lomo you probably haven't heard of them trust fund banh mi. Flannel Shoreditch dreamcatcher, quinoa flexitarian Banksy pickled post-ironic lo-fi. Photo booth asymmetrical tousled letterpress.</p>
    </div>
  </article>
</section>
<a href="http://ettrics.com/code/vertical-layout-navigation/" class="logo" target="_blank">
 <img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" /> 
</a>

script.js

var menu = document.querySelector('.nav__list');
var burger = document.querySelector('.burger');
var doc = $(document);
var l = $('.scrolly');
var panel = $('.panel');
var vh = $(window).height();

var openMenu = function() {
  burger.classList.toggle('burger--active');
  menu.classList.toggle('nav__list--active');
};

// reveal content of first panel by default
panel.eq(0).find('.panel__content').addClass('panel__content--active');

var scrollFx = function() {
  var ds = doc.scrollTop();
  var of = vh / 4;
  
  // if the panel is in the viewport, reveal the content, if not, hide it.
  for (var i = 0; i < panel.length; i++) {
    if (panel.eq(i).offset().top < ds+of) {
     panel
       .eq(i)
       .find('.panel__content')
       .addClass('panel__content--active');
    } else {
      panel
        .eq(i)
        .find('.panel__content')
        .removeClass('panel__content--active')
    }
  }
};

var scrolly = function(e) {
  e.preventDefault();
  var target = this.hash;
  var $target = $(target);

  $('html, body').stop().animate({
      'scrollTop': $target.offset().top
  }, 300, 'swing', function () {
      window.location.hash = target;
  });
}

var init = function() {
  burger.addEventListener('click', openMenu, false);
  window.addEventListener('scroll', scrollFx, false);
  window.addEventListener('load', scrollFx, false);
  $('a[href^="#"]').on('click',scrolly);
};

doc.on('ready', init);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$nav-bg: #2b3033;
$blue: #5fc7ea;
$red: #e68568;
$yellow: #e6d068;
$green: #68e6ac;
$ease: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
$content-animation: scale(0.7) rotateX(-230deg);

* {
  box-sizing: border-box;
}

body {
  font-family: 'Lato';
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100px;
  backface-visibility: hidden;
  
  &__list {
    display: flex;
    flex-flow: column wrap;
    height: 85vh;
    transform: translate(0, -100%);
    transition: $ease;
    
    &--active {
      transform: translate(0, 0);
    }
  }
  
  &__item {
    flex: 1;
    position: relative;
  }
  
  &__link {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    text-decoration: none;
    font-size: 24px;
    background: $nav-bg;
    transition: $ease;
    
    &:hover {
      background: mix(black, $nav-bg, 10);
    }
  }
  
  @media (max-width: 640px) {
    width: 70px;
    
    &__list {
      height: 90vh;
    }
  }
}

.burger {
  height: 15vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  background: $nav-bg;
  cursor: pointer;
  transition: $ease;
  
  &:hover {
    background: mix(black, $nav-bg, 10);
  }
  
  &__patty {
    position: relative;
    height: 2px;
    width: 40px;
    background: white;
    
    &:before {
      content: "";
      position: absolute;
      top: -10px;
      left: 0;
      height: 2px;
      width: 100%;
      background: white;
    }
    
    &:after {
      content: "";
      position: absolute;
      top: 10px;
      left: 0;
      height: 2px;
      width: 100%;
      background: white;
    }
  }
  
  &__patty,
  &__patty:before,
  &__patty:after {
    will-change: transform;
    transition: $ease;
  }
  
  &--active {
    .burger__patty {
      transform: rotate(90deg);
      &:before {
        transform: rotate(-45deg) translate(-7px,-7px) scaleX(0.7);
      }
      
      &:after {
        transform: rotate(45deg) translate(-7px,7px) scaleX(0.7);
      }
    }
  }
  
  @media (max-width: 640px) {
    height: 10vh;
    
    &__patty {
      transform: scale(0.8);
    }
    
    &--active {
      .burger__patty {
        transform: scale(0.8) rotate(90deg);
      }
    }
  }
}

.panel {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  
  &__wrapper {
    padding: 7vh 7vw;
    perspective: 1000px;
  }
  
  &__content {
    will-change: transform;
    transform: $content-animation;
    transform-origin: center 80%;
    opacity: 0;
    transition: $ease;
    
    &--active {
      transform: none;
      opacity: 1;
    }
  }
  
  &__headline {
    font-weight: 700;
    opacity: 0.8;
    font-size: 48px;
    margin: 0 0 25px 0;
  }
  
  p {
    margin: 0 0 25px 0;
    color: lighten(black, 10);
    font-size: 24px;
    max-width: 800px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  &__block {
    height: 3px;
    background: rgba(black, 0.2);
    margin: 0 0 25px 0;
  }
  
  @media (max-width: 640px) {
    
    &__headline {
      font-size: 36px;
    }
    
    &__wrapper {
      padding: 10vh 10vw;
    }
    
    p {
      font-size: 16px;
    }
  }
}

.c-blue {
  color: $blue;
}

.c-red {
  color: $red;
}

.c-green {
  color: $green;
}

.c-yellow {
  color: $yellow;
}

.b-blue {
  background: $blue;
}

.b-red {
  background: $red;
}

.b-green {
  background: $green;
}

.b-yellow {
  background: $yellow;
}

.logo {
  position: fixed;
  bottom: 3vh;
  right: 3vw;
  z-index: 2;
  
  
  img {
    width: 65px;
    transition: $ease;
    transform: rotate(0);
  
    &:hover {
      transform: rotate(180deg) scale(1.1);
    }
  }
}

vertical-layout-with-navigation.markdown

Vertical Layout with Navigation

Vertical scrolling sections of content with mobile hamburger navigation. Animations easily customized.

A Pen by Ettrics on CodePen.

License.