Fullscreen Hamburger Menu Plugin jQuery Overlay Menu - Download Fullscreen Hamburger Menu Plugin With jQuery - Overlay Menu

Download Fullscreen Hamburger Menu Plugin With jQuery – Overlay Menu

Posted on

This time I will share jQuery Plugin and tutorial about Fullscreen Hamburger Menu Plugin With jQuery – Overlay Menu, hope it will help you in programming stack.

Fullscreen Hamburger Menu Plugin jQuery Overlay Menu - Download Fullscreen Hamburger Menu Plugin With jQuery - Overlay Menu
File Size: 3.44 KB
Views Total: 8417
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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

2. Create the fullscreen overlay menu.

1 <nav class="overlay" id="overlay">
2   <ul>
3     <li><a href="#">Home</a></li>
4     <li><a href="#">Blog</a></li>
5     <li><a href="#">About</a></li>
6     <li><a href="#"><a href="https://www.jqueryscript.net/tags.php?/Portfolio/">Portfolio</a></a></li>
7     <li><a href="#">Contact</a></li>
8   </ul>
9 </nav>

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

1 <div class="navbar-header">
2   <div class="toggle-button" id="toggle">
3     <span class="bar top"></span>
4     <span class="bar middle"></span>
5     <span class="bar bottom"></span>
6   </div>
7 </div>

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

1 <script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
2 <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.

source : jqueryscript.net