Minimal Expanding Hamburger Menu With jQuery - Hamburger Nav
File Size: | 4.23 KB |
---|---|
Views Total: | 2220 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery based sticky hamburger menu where your users can click on the hamburger toggle button to reveal the site navigation with an expanding effect.
How to use it:
1. The html structure for the hamburger navigation.
<div class="navHeader"> <header > <img src="threelines.png" alt="Hamburger" class="hamburger"> </header> <div class="menu"> <ul> <a href="" id="home"> <li>Home</li> </a> <a href="" id="Section-1"> <li>Section One</li> </a> <a href="" id="Section-2"> <li>Section Two</li> </a> <a href="" id="Section-3"> <li>Section Three</li> </a> <a href="" id="Section-4"> <li>Section Four</li> </a> <a href="" id="Section-5"> <li>Section Five</li> </a> </ul> </div> </div>
2. The CSS to style the hamburger navigation and make it sticky at the top of the webpage.
header { width: 100%; background: #46CFB0; height: 50px; line-height: 50px; } .hamburger { background: none; position: absolute; top: 0; right: 0; line-height: 45px; padding: 12px 15px 0px 15px; color: ##ecf0f1; border: 0; font-size: 1.4em; font-weight: bold; cursor: pointer; outline: none; } .menu { z-index: 1000000; font-weight: bold; font-size: 0.8em; width: 100%; background: #FC6D58; color:#fff position: absolute; text-align: center; } .menu ul { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } .menu li { display: block; padding: 15px 0 15px 0; color: #000; border-bottom: #fff 1px solid; font-size: x-large; } .menu li:hover { display: block; background: #E95546; padding: 15px 0 15px 0; border-bottom: #fff 1px solid; } .menu ul li a { text-decoration: none; margin: 0px; color: #fff; } .menu ul li a:hover { color: #fff; text-decoration: none; } .menu a { text-decoration: none; color: white; } .menu a:hover { text-decoration: none; color: white; } .sticky { position: fixed; width: 100%; left: 0; top: 0; z-index: 100; border-top: 0; }
3. Include the latest version of jQuery library at the bottom of the webpage.
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
4. The JavaScript.
var stickyNavTop = $('.navHeader').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('.navHeader').addClass('sticky'); } else { $('.navHeader').removeClass('sticky'); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); function closeBurger() { $(".menu").slideToggle("slow", function() { $(".hamburger").show(); }); }; $(".menu").hide(); $(".hamburger").click(function() { $(".menu").slideToggle("slow", function() { $(".hamburger").show(); }); });
This awesome jQuery plugin is developed by kenhoward. For more Advanced Usages, please check the demo page or visit the official website.