Author: | designcourse |
---|---|
Views Total: | 1,738 views |
Official Page: | Go to website |
Last Update: | December 29, 2020 |
License: | MIT |
Preview:

Description:
A hamburger site/app navigation that pops out a horizontal navigation bar when clicked/tapped.
Built with HTML list, CSS/CSS3, and GSAP 3.
How to use it:
1. Add a nav list together with a hamburger toggle button to the page.
<header> <img class="activator" id="activator" src="/path/to/hamburger/" alt=""> <nav> <ul> <li><a href="#"><img src="/path/to/icon/"></a></li> <li><a href="#"><img src="/path/to/icon/"></a></li> <li><a href="#"><img src="/path/to/icon/"></a></li> <li><a href="#"><img src="/path/to/icon/"></a></li> <li><a href="#"><img src="/path/to/icon/"></a></li> </ul> </nav> </header>
2. Add the following CSS snippets to the page.
header { display: flex; } header .activator { padding: 1em; border-radius: 100%; cursor: pointer; } header .activator:hover { background: #1e2129; } img { width: 100%; max-width: 45px; } ul { list-style-type: none; margin: 0; padding: 0; } nav { background: #292e38; border-radius: 0 5em 5em 0; padding: .5em; clip-path: ellipse(50% 50% at -50% 50%); } nav ul { display: flex; } nav ul li a { display: block; padding: .5em; margin: 0 .5em; border-radius: 50%; } nav ul li a:hover { background: #323844; } nav ul li a img { opacity: 0; transform: translateX(-10px); }
3. Load the gsap.js and CSSRulePlugin at the end of the document.
<script src="/path/to/cdn/gsap.min.js"></script> <script src="/path/to/cdn/CSSRulePlugin.min.js"></script>
4. The necessary JavaScript to activate the hamburger navigation.
var card = document.getElementById('activator'); var tl = gsap.timeline({defaults: {ease: "power2.inOut"}}) var toggle = false; tl.to('.activator', { background: '#805ad5', 'borderRadius': '5em 0 0 5em' }); tl.to('nav', { 'clipPath': 'ellipse(100% 100% at 50% 50%)' }, "-=.5") tl.to('nav img', { opacity: 1, transform: 'translateX(0)', stagger: .05 }, "-=.5") tl.pause(); card.addEventListener('click', () => { toggle = !toggle; if (toggle ? tl.play() : tl.reverse()); })