Expanding Fullscreen Hamburger Menu With jQuery And CSS3
File Size: | 2.97 KB |
---|---|
Views Total: | 5638 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery & CSS based expanding navigation that will morph the hamburger menu trigger into a fullscreen overlay menu when needed. Heavily based on CSS3 transitions and transforms. jQuery is used only to toggle the CSS classes when you trigger / close the hamburger menu.
How to use it:
1. Create the hamburger menu trigger.
<div class="menu"> <span class="menu-circle"></span> <a href="#" class="menu-link"> <span class="menu-icon"> <span class="menu-line menu-line-1"></span> <span class="menu-line menu-line-2"></span> <span class="menu-line menu-line-3"></span> </span> </a> </div>
2. Style & animate the hamburger menu trigger.
.menu { position: absolute; top: 20px; left: 20px; height: 46px; width: 46px; } .menu-link { width: 100%; height: 100%; position: absolute; z-index: 1002; } .menu-icon { position: absolute; width: 20px; height: 14px; margin: auto; left: 0; top: 0; right: 0; bottom: 1px; } .menu-circle { background-color: #fff; width: 100%; height: 100%; position: absolute; border-radius: 50%; transform: scale(1); z-index: 1000; transition: all 0.2s ease-in-out; } .menu.open .menu-circle { transform: scale(60); } .menu.open .menu-line-2 { opacity: 0; } .menu.open .menu-line-1 { transform: translateY(7px) translateY(-50%) rotate(-45deg); } .menu.open .menu-line-3 { transform: translateY(-7px) translateY(50%) rotate(45deg); } .menu-line { background-color: #333; height: 2px; width: 100%; border-radius: 2px; position: absolute; left: 0; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .menu-line-1 { top: 0; } .menu-line-2 { top: 0; bottom: 0; margin: auto; } .menu-line-3 { bottom: 0; } .menu:hover .menu-circle { transform: scale(1.4); }
3. Create the overlay menu as this:
<div class="menu-overlay"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> <a href="#">Jobs</a> </div>
4. Style the overlay menu in the CSS.
.menu-overlay { visibility: hidden; background-color: #fff; color: #333; height: 100%; width: 100%; position: fixed; text-align: center; transition: opacity 0.2s ease-in-out; z-index: 1001; } .menu-overlay a { color: #333; font-weight: 600; font-size: 32px; padding: 2%; margin: 25% 1% 0; display: inline-block; } .menu-overlay.open { opacity: 1; visibility: visible; }
5. Place the latest version of jQuery library (slim build) at the bottom of the html page.
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
6. The core jQuery script.
$(".menu-link").click(function(e) { e.preventDefault(); $(".menu-overlay").toggleClass("open"); $(".menu").toggleClass("open"); });
This awesome jQuery plugin is developed by stevenpan78. For more Advanced Usages, please check the demo page or visit the official website.