Author: | obscuredetour |
---|---|
Views Total: | 2,037 views |
Official Page: | Go to website |
Last Update: | October 15, 2018 |
License: | MIT |
Preview:

Description:
Yet another responsive, cross-platform navigation system that converts the horizontal menu into an off-screen hamburger navigation on the mobile device.
Built with vanilla JavaScript and CSS flexbox model.
How to use it:
Import the JavaScript nav.js
and Stylesheet nav.css
into the HTML file.
<link rel="stylesheet" href="css/nav.css"> <script src="js/nav.js"></script>
Create a normal header navigation following the HTML structure like these:
<header class="nav-wrapper"> <nav class="nav" role="navigation"> <span class="toggleNav"> <svg class="svg-hamburger" viewBox="0 0 1536 1280" xmlns="http://www.w3.org/2000/svg"> <path class="svg-hamburger-path" d="M1536 1088v128q0 26-19 45t-45 19H64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H64q-26 0-45-19T0 704V576q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H64q-26 0-45-19T0 192V64q0-26 19-45T64 0h1408q26 0 45 19t19 45z" fill="rgba(226, 241, 236, 20.85)" /> </svg> </span> <ul class="nav__list" id="sideNav"> <div class="nav__list-left"> <a class="closeBtn"> <svg class="svg-close" viewBox="0 0 1188 1188" xmlns="http://www.w3.org/2000/svg"> <path class="svg-close-path" d="M1188 956q0 40-28 68l-136 136q-28 28-68 28t-68-28L594 866l-294 294q-28 28-68 28t-68-28L28 1024Q0 996 0 956t28-68l294-294L28 300Q0 272 0 232t28-68L164 28q28-28 68-28t68 28l294 294L888 28q28-28 68-28t68 28l136 136q28 28 28 68t-28 68L866 594l294 294q28 28 28 68z" fill="rgba(226, 241, 236, 0.85)" /> </svg> </a> <li> <a class="nav__item" href="#">Home</a> </li> <li> <a class="nav__item" href="#">About</a> </li> <li> <a class="nav__item" href="#">Contact</a> </li> <li> <a class="nav__item" href="#">Blog</a> </li> <li> <a class="nav__item" href="#">Jobs</a> </li> </div> <div class="nav__list-right"> <div class="page__overlay"></div> </div> </ul> </nav> </header>
Customize the screen width at which breakpoint the header navigation will be collapsed into an off-screen navigation with a hamburger button.
@media all and (min-width: 800px) { /* ... */ }