Create a full screen navigation using CSS and Javascript

Full screen navigation worth coding not just due to design sense, but the content and links get more space on screen. Further there is no need to code so much Javascript, just for the purpose of toggling classes I am using Javascript. Here is the demo:

See the Pen Full Screen Nav by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

The journey starts with markup or HTML. First, we need is the navicon, a button to trigger the navigation.Then a parent navigation tag (<nav>) but make sure that <nav> tag doesn't have any parent with position relative, otherwise positioning will be effected.

<header><span class='navicon'>&#xf0c9;</span>
  <h1>Full Screen Nav</h1></header>
<nav>
  <span class='closeB'>&#xf00d;</span>
  <h2>Navigation</h2>
  <ul>
    <li><a href='#'><span>&#xf015;</span> Home</a></li>
    <li><a href='#'><span>&#xf09e;</span> Blog</a></li>
    <li><a href='#'><span>&#xf0e0;</span> Contact</a></li>
    <li><a href='#'><span>&#xf06a;</span> About</a></li>
    <li><a href='#'><span>&#xf004;</span> Donate</a></li>
  </ul>
  <div class='info'>
    <ul>
      <li><span>&#xf232;</span> Whatsapp<br>+12-324-5678</li>
      <li><span>&#xf199;</span> Email<br>hamzadhamiya@gmail.com</li>
      <li><span>&#xf124;</span> Address<br>Google Inc HQ, Mountain View, California, US</li>
    </ul>
  </div>
</nav>

Next is we need is to make sure that body tag doesn't show scroll bar when the navigation is active. We need to toggle active class to several elements, for functional as well as for design reasons. FOr that just add several lines of JS.

var navicon=document.querySelector('.navicon'),
    nav=document.querySelector('nav'),
    close=document.querySelector('.closeB'),
    body=document.querySelector('body');
function toggleStuff(){
nav.classList.toggle('active');
navicon.classList.toggle('active');
body.classList.toggle('active');
}
navicon.addEventListener('click',toggleStuff);
close.addEventListener('click',toggleStuff);

Next is to hide the navigation and then display it when active class is added. That old technique using visibility and opacity properties. Use transition to make a little fade in effect.

nav {
  position: fixed;
  overflow-y: auto;
  left: 0;
  top: -20px;
  width: 100%;
  height: 100%;
  opacity:0;
  visibility:hidden;
  background: #2c3e50;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

nav.active {
  visibility:visible;
  opacity:1;
  top:0;
}

To hide the scroll bar while navigation is open, just add overflow-y:hidden to body tag with active class. You can see the whole CSS in pen.

This was just a demo, many possibilities are around.