Navigation - offscreen mobile

Navigation build for blog post. Embed no. 2.

by Phineusadrasteia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="app">
  <div class="cover"></div>
  <nav id="simple_nav">
    <div class="logo_wrapper">
      <img src="http://via.placeholder.com/150x50" alt="" />
    </div>
    <div class="fa fa-bars cog_icon"></div>
    <ul>
      <li>
        <span>Home</span>
      </li>
      <li>
        <span>About</span>
      </li>
      <li>
        <span>Gallery</span>
      </li>
      <li>
        <span>Contact</span>
      </li>
    </ul>
  </nav>

  <div class="content">
    <article>
      <h1>Our website title - scroll down</h1>
      <section>
        <h2>Sub Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odit officiis officia aspernatur rem, molestiae at reprehenderit tempore culpa non nisi dolorum fugit iste atque ipsa maxime necessitatibus est ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, est consequatur. Repellendus eligendi nulla magnam repudiandae autem rerum cum ipsam dolorem minus at delectus nisi, nostrum voluptatum. Earum odit, dolor.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odit officiis officia aspernatur rem, molestiae at reprehenderit tempore culpa non nisi dolorum fugit iste atque ipsa maxime necessitatibus est ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, est consequatur. Repellendus eligendi nulla magnam repudiandae autem rerum cum ipsam dolorem minus at delectus nisi, nostrum voluptatum. Earum odit, dolor.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisiing elit. Illo odit officiis officia aspernatur rem, molestiae at reprehenderit tempore culpa non nisi dolorum fugit iste atque ipsa maxime necessitatibus est ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, est consequatur. Repellendus eligendi nulla magnam repudiandae autem rerum cum ipsam dolorem minus at delectus nisi,...

SCSS

body {
  margin: 0;
  font-size: 14px;
}

#simple_nav {
  position: fixed;
  display: flex;
  flex-direction: row;
  background: #fff;
  z-index: 3;
  width: 100%;
  border: 1px solid #ccc;
  padding: .5rem 0;
}

.logo_wrapper {
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
  margin-left: 1rem;
  
  img {
    align-self: center;
  }
}

h1 {
  font-weight: bold;
  font-size: 2rem;
}
h2 {
  font-weight: bold;
  font-size: 1.5rem;
}

.content {
  top: 5rem;
  position: relative;
  padding: 2rem;
  z-index: 0;
}

@media screen and (min-width: 768px) {
  ul {
    list-style: none;
    display: flex;
    align-self: center;
    flex-grow: 3;
    padding-left: 0;
    justify-content: space-around;

    li {
      justify-content: space-between;
      padding: 1rem;
      border: 1px solid #ccc;
      transition: background .2s;
      cursor: pointer;

      &:hover {
        background: #ccc;
      }
      &:active {
        background: #ccaaaa;
      }
    }
  }
  
  .cog_icon {
    display: none;
  }
}

.cover {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #ccc;
  z-index: 2;
  transition: opacity .2s;
}

/* Mobile resolution */
@media screen and (max-width: 767px) {
  ul {
    display: none;
  }
  
  .logo_wrapper {
    justify-content: flex-start;
    
    img {
      margin-left: 1rem;
    }
  }
  
  .cog_icon {
    height: 40px;
    width: 40px;
    text-align: center;
    font-size: 2.5rem;
    margin-right: 1rem;
    
    color: #ccc;
    display: flex;
    justify-content: flex-end;
    align-self: center;
    
    &::before {
      width: 100%;
      height: 100%;
    }
  }
  
  /* active navigation */
  /* perform the slide in animation using transition acc */
  .active {
    .cover {
      opacity: .8;
      pointer-events: auto;
    }
    
    .cog_icon {
      z-index: 5;
      right: 0;
      position: relative;
    }
    
    ul {
      display: block;
      position: absolute;
  ...

JavaScript

var $wrapper = document.getElementById('app');
var $options = document.querySelector('.cog_icon');

$options.addEventListener('click', function() {
  $wrapper.classList.toggle('active');
}, false);