Fullscreen Hamburger Menu Plugin With jQuery - Overlay Menu

A very small jQuery plugin which makes uses of CSS transition and opacity properties to show & hide a fullscreen overlay navigation menu with a hamburger menu toggler.

How to use it:

1. Link to the required style sheet overlay.css:

<link rel="stylesheet" href="overlay.css">

2. Create the fullscreen overlay menu.

<nav class="overlay" id="overlay">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

3. Create a hamburger button to toggle the overlay menu.

<div class="navbar-header">
  <div class="toggle-button" id="toggle">
    <span class="bar top"></span>
    <span class="bar middle"></span>
    <span class="bar bottom"></span>
  </div>
</div>

4. Link to the latest version of jQuery library & the jQuery Overlay Menu plugin's script. That's it.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="overlay.js"></script>

---

This awesome jQuery plugin is developed by mediasittich. For more Advanced Usages, please check the demo page or visit the official website.