Fullscreen Hamburger Navigation With JavaScript And CSS3
File Size: | 6.69 KB |
---|---|
Views Total: | 1784 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A fancy responsive site/app navigation system that reveals a fullscreen navigation menu by clicking the hamburger toggle button. Built with HTML list, CSS/CSS3, and a little bit of JavaScript.
Basic usage:
1. Create the HTML for the navigation menu.
<div class="nav"> <div class="nav__content"> <ul class="nav__list"> <li class="nav__list-item active-nav"><a href="#">Home</a></li> <li class="nav__list-item"><a href="#">About</a></li> <li class="nav__list-item"><a href="#">Contact</a></li> <li class="nav__list-item"><a href="#">Blog</a></li> </ul> </div> </div>
2. Create the HTML for the hamburger toggle button.
<div class="nav-but-wrap"> <div class="menu-icon hover-target" id="menu-button"> <span class="menu-icon__line menu-icon__line-left"></span> <span class="menu-icon__line"></span> <span class="menu-icon__line menu-icon__line-right"></span> </div> </div>
3. The primary CSS/CSS3 for the navigation system.
/* Hamburger button */ .nav-but-wrap{ position: relative; display: inline-block; margin: 0 auto; text-align: center; padding-top: 15px; margin-top: 20px; transition : all 0.3s ease-out; } .menu-icon { height: 30px; width: 30px; position: relative; z-index: 2; cursor: pointer; display: block; margin: 0 auto; text-align: center; } .menu-icon__line { height: 2px; width: 30px; display: block; background-color: #fff; margin-bottom: 7px; cursor: pointer; -webkit-transition: background-color .5s ease, -webkit-transform .2s ease; transition: background-color .5s ease, -webkit-transform .2s ease; transition: transform .2s ease, background-color .5s ease; transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease; } .menu-icon__line-left { width: 30px; margin-bottom: 7px; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .menu-icon__line-right { width: 30px; float: right; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .menu-icon:hover .menu-icon__line-left, .menu-icon:hover .menu-icon__line-right { width: 30px; } /* Navigation menu */ .nav { position: fixed; z-index: 98; } .nav:before, .nav:after { content: ""; position: fixed; width: 100vw; height: 100vh; background: rgba(20, 21, 26,0.6); border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; z-index: -1; -webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s; transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s; transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s; transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .nav:after { background: rgba(9,9,12,1); -webkit-transition-delay: 0s; transition-delay: 0s; } .nav:before { -webkit-transition-delay: .2s; transition-delay: .2s; } .nav__content { position: fixed; visibility: hidden; top: 50%; margin-top: 20px; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); width: 100%; text-align: center; } .nav__list { position: relative; padding: 0; margin: 0; z-index: 2; } .nav__list-item { position: relative; display: block; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; opacity: 0; text-align: center; color: #fff; overflow: hidden; font-family: 'Poppins', sans-serif; font-size: 12vh; font-weight: 900; line-height: 1.05; letter-spacing: 3px; -webkit-transform: translate(0%, 40px); transform: translate(0%, 40px); -webkit-transition: opacity .2s ease, -webkit-transform .3s ease; transition: opacity .2s ease, -webkit-transform .3s ease; transition: opacity .2s ease, transform .3s ease; transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease; margin-top: 0; margin-bottom: 0; } .nav__list-item a{ position: relative; text-decoration: none; color: rgba(255,255,255,0.6); overflow: hidden; cursor: pointer; padding-left: 5px; padding-right: 5px; font-weight: 700; z-index: 2; display: inline-block; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .nav__list-item a:after{ position: absolute; content: ''; bottom: 0; left: 50%; width: 0; height: 0; opacity: 0; background-color: #8167a9; z-index: 1; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .nav__list-item a:hover:after{ height: 6px; opacity: 0.7; left: 0; width: 100%; } .nav__list-item a:hover{ color: rgba(255,255,255,1); } .nav__list-item.active-nav a{ color: rgba(255,255,255,1); } .nav__list-item.active-nav a:after{ height: 6px; opacity: 0.7; left: 0; width: 100%; } body.nav-active .nav__content { visibility: visible; } body.nav-active .menu-icon__line { background-color: #fff; -webkit-transform: translate(0px, 0px) rotate(-45deg); transform: translate(0px, 0px) rotate(-45deg); } body.nav-active .menu-icon__line-left { width: 15px; -webkit-transform: translate(2px, 4px) rotate(45deg); transform: translate(2px, 4px) rotate(45deg); } body.nav-active .menu-icon__line-right { width: 15px; float: right; -webkit-transform: translate(-3px, -3.5px) rotate(45deg); transform: translate(-3px, -3.5px) rotate(45deg); } body.nav-active .menu-icon:hover .menu-icon__line-left, body.nav-active .menu-icon:hover .menu-icon__line-right { width: 15px; } body.nav-active .nav { visibility: visible; } body.nav-active .nav:before, body.nav-active .nav:after { -webkit-transform: translateY(0%); transform: translateY(0%); border-radius: 0; } body.nav-active .nav:after { -webkit-transition-delay: .1s; transition-delay: .1s; } body.nav-active .nav:before { -webkit-transition-delay: 0s; transition-delay: 0s; } body.nav-active .nav__list-item { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, transform .3s ease, color .3s ease; transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease; } body.nav-active .nav__list-item:nth-child(0) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } body.nav-active .nav__list-item:nth-child(1) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } body.nav-active .nav__list-item:nth-child(2) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } body.nav-active .nav__list-item:nth-child(3) { -webkit-transition-delay: 1s; transition-delay: 1s; } body.nav-active .nav__list-item:nth-child(4) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } body.nav-active .nav__list-item:nth-child(5) { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } body.nav-active .nav__list-item:nth-child(6) { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; } body.nav-active .nav__list-item:nth-child(7) { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; } body.nav-active .nav__list-item:nth-child(8) { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } body.nav-active .nav__list-item:nth-child(9) { -webkit-transition-delay: 1.6s; transition-delay: 1.6s; } body.nav-active .nav__list-item:nth-child(10) { -webkit-transition-delay: 1.7s; transition-delay: 1.7s; }
4. Include the latest jQuery JavaScript library at the bottom of the page. Required for theme roller.
<script src="/path/to/jquery.min.js"></script>
5. The main JavaScript to enable the navigation system.
var app = function () { var body = undefined; var menu = undefined; var menuItems = undefined; var init = function init() { body = document.querySelector('body'); menu = document.querySelector('.menu-icon'); menuItems = document.querySelectorAll('.nav__list-item'); applyListeners(); }; var applyListeners = function applyListeners() { menu.addEventListener('click', function () { return toggleClass(body, 'nav-active'); }); }; var toggleClass = function toggleClass(element, stringClass) { if (element.classList.contains(stringClass)) element.classList.remove(stringClass);else element.classList.add(stringClass); }; init(); }();
This awesome jQuery plugin is developed by Ivan Grozdic. For more Advanced Usages, please check the demo page or visit the official website.