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.
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"> |
3 |
<li><a href="#">Home</a></li> |
4 |
<li><a href="#">Blog</a></li> |
5 |
<li><a href="#">About</a></li> |
7 |
<li><a href="#">Contact</a></li> |
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> |
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.
