One current trend in navigation styles that you may have seen is the full screen navigation overlay. With this type of navigation, toggling the navigation will overlay the menu across the entire screen. Codrops did a really nice set of demos with full screen overlay styles last year. I wanted to demonstrate a very simple version of the overlay using jQuery. Of course, it’s responsive as well, and you can view the demo on CodePen.

HTML

The HTML is easy. I have all of my content in a main wrapper, and my navigation in an aside. The navigation is a normal unordered list.

<aside>
  <div class="outer-close toggle-overlay">
    <a class="close"><span></span></a>
  </div>
  <nav>
    <ul>
      <li><a href="#!">Features</a></li>
      <li><a href="#!">Pricing</a></li>
      <li><a href="#!">Documentation</a></li>
      <li><a href="#!">About</a></li>
    </ul>
  </nav>
</aside>

#css #jquery #design #tutorial