Uber Inspired Hamburger Navigation With jQuery And GSAP
File Size: | 3.52 MB |
---|---|
Views Total: | 2030 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A responsive, fullscreen, split hamburger toggle navigation for both desktop & mobile devices, inspired by Uber Rebrand 2018 Website.
Written in jQuery, GSAP(TweenMax.js), and CSS/CSS3.
How to use it:
1. Create the HTML for the Uber toggle menu.
<header> <div class="nav"> <div class="title"> Navigation </div> <div class="toggle"> <div class="bar"></div> </div> <nav class=""> <div class="showcase"> <div class="showcase-container"> <ul class="showcase-menu"> <li>Left Content 1</li> <li>Left Content 2</li> <li>Left Content 3</li> ... </ul> </div> </div> <div class="menu"> <ul class="main-menu"> <li class="active"><a href="#!">Menu Item 1</a></li> <li><a href="#!">Menu Item 2</a></li> <li><a href="#!">Menu Item 3</a></li> ... </ul> </div> </nav> </div> </header>
2. Load the necessary jQuery and GSAP's TweenMax.js in the document.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
3. The required CSS/CSS3 styles.
header { z-index: 5; opacity: 0; transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } header .nav { position: fixed; left: 0; top: 0; width: 100%; height: 80px; } header .nav .title { line-height: 80px; padding: 0 120px; font-size: 24px; color: #fff; font-weight: 900; } header .nav .toggle { position: absolute; margin: auto; width: 46px; height: 46px; right: 120px; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 10; cursor: pointer; } header .nav .toggle .bar { position: relative; width: 40px; height: 2px; background: #fff; } header .nav .toggle .bar:before, header .nav .toggle .bar:after { content: ''; position: absolute; width: 100%; height: 100%; background: inherit; left: 0; -webkit-transform-origin: center center; transform-origin: center center; transition: top .25s ease, bottom .25s ease, -webkit-transform .25s ease; transition: transform .25s ease, top .25s ease, bottom .25s ease; transition: transform .25s ease, top .25s ease, bottom .25s ease, -webkit-transform .25s ease; } header .nav .toggle .bar:before { top: -10px; } header .nav .toggle .bar:after { bottom: -10px; } header .nav .toggle.clicked .bar { background: transparent; } header .nav .toggle.clicked .bar:before, header .nav .toggle.clicked .bar:after { background: #000; } header .nav .toggle.clicked .bar:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 0; } header .nav .toggle.clicked .bar:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); bottom: 0; } header .nav nav { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; display: flex; flex-direction: row; opacity: 0; z-index: 5; transition: opacity .5s ease; } header .nav nav .showcase { background: #000; flex: 1; color: #fff; display: flex; justify-content: center; align-items: center; } header .nav nav .showcase .showcase-container { width: 50%; position: relative; overflow: hidden; } header .nav nav .showcase .showcase-container:before { content: ''; display: block; padding-top: 100%; } header .nav nav .showcase .showcase-menu { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow-y: visible; list-style-type: none; transition: top .25s ease; } header .nav nav .showcase .showcase-menu li { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 40px; text-transform: uppercase; text-align: center; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } header .nav nav .showcase .showcase-menu li.overlay:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: -1; } header .nav nav .menu { background: #fff; flex: 1; } header .nav nav .menu ul { width: 100%; padding: 80px 48px 24px 48px; list-style-type: none; max-height: 100%; overflow-y: auto; } header .nav nav .menu ul::-webkit-scrollbar { width: 6px; height: 10px; } header .nav nav .menu ul::-webkit-scrollbar-button { width: 0px; height: 0px; } header .nav nav .menu ul::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.4); border: 0px none #ffffff; border-radius: 3px; } header .nav nav .menu ul::-webkit-scrollbar-thumb:hover { background: #000; } header .nav nav .menu ul::-webkit-scrollbar-thumb:active { background: #000; } header .nav nav .menu ul::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border: 0px none #ffffff; border-radius: 0; } header .nav nav .menu ul::-webkit-scrollbar-track:hover { background: rgba(0, 0, 0, 0.1); } header .nav nav .menu ul::-webkit-scrollbar-track:active { background: rgba(0, 0, 0, 0.1); } header .nav nav .menu ul::-webkit-scrollbar-corner { background: transparent; } header .nav nav .menu ul li { display: flex; flex-direction: row; align-items: center; } header .nav nav .menu ul li .number { display: inline-block; padding: 0 0 0 80px; overflow: hidden; } header .nav nav .menu ul li .number span { display: block; font-size: 48px; font-weight: 400; transition: -webkit-transform .25s ease; transition: transform .25s ease; transition: transform .25s ease, -webkit-transform .25s ease; -webkit-transform: translateY(100%); transform: translateY(100%); } header .nav nav .menu ul li a { display: inline-block; font-size: 48px; color: #000; line-height: 1; padding: 24px 0 24px 80px; transition: -webkit-transform .25s ease; transition: transform .25s ease; transition: transform .25s ease, -webkit-transform .25s ease; } header .nav nav .menu ul li:hover a { -webkit-transform: translateX(20px); transform: translateX(20px); } header .nav nav .menu ul li.hover .number span { -webkit-transform: translateY(0); transform: translateY(0); } header .nav nav.hidden { display: none; } header .nav nav.open { opacity: 1; } header .nav nav.open .showcase { -webkit-animation: slideInLeft 0.5s cubic-bezier(0.3, 0, 0.3, 1) forwards; animation: slideInLeft 0.5s cubic-bezier(0.3, 0, 0.3, 1) forwards; } header .nav nav.open .menu { -webkit-animation: slideInRight 0.5s cubic-bezier(0.3, 0, 0.3, 1) forwards; animation: slideInRight 0.5s cubic-bezier(0.3, 0, 0.3, 1) forwards; } @-webkit-keyframes slideInRight { from { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { from { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideInLeft { from { -webkit-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { from { -webkit-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } }
4. The main JavaScript to activate the Uber hamburger toggle menu.
$(document).ready(function() { navNumbers(); backToDefault(); // show hovered li stuff $('.main-menu').on('mouseover', 'li', function() { showTarget($(this)); }); // show default .active li stuff $('.main-menu').on('mouseleave', backToDefault); // change active list item $('.main-menu').on('click', 'li', function() { changeActive($(this)); }); // toggle menu $('.toggle').on('click', toggleMenu); // for showcase only var tl = new TimelineMax(), body = $('body'), header = $('header'), content = $('.content p'), toggle = $('.toggle'), nav = $('nav'); tl.to(body, 1, { padding: '0 80px 80px', delay: .5 }); tl.to(header, .25, { opacity: 1, delay: .5 }); tl.to(content, .25, { opacity: 1 }, '-=.25'); tl.call(function() { toggleMenu(); }, null, null, 3); tl.call(function() { toggleMenu(); }, null, null, 4.5); }); // toggle menu function toggleMenu() { var toggle = $('.toggle'); var nav = $('nav'); if(toggle.hasClass('clicked')) { toggle.removeClass('clicked'); nav.removeClass('open'); console.log('remove open'); setTimeout(function() { console.log('add hidden'); nav.addClass('hidden'); }, 500); } else { nav.removeClass('hidden'); toggle.addClass('clicked'); nav.addClass('open'); } } // give the list items numbers function navNumbers() { var sum = $('.main-menu li').length; var i = 0; var x = 0; $('.showcase-menu li').each(function() { $(this).attr('data-target', x); x++; }); $('.main-menu li').each(function() { var number = ('0' + i).slice(-2); var numberElement = '<div class="number"><span>'+number+'</span></div>'; $(this).prepend(numberElement); $(this).attr('data-target', i); i++; }); } // show the hovered list item stuff function showTarget(e) { $('.main-menu li').removeClass('hover'); var target = $(e).attr('data-target'); var showcaseHeight = $('.showcase-menu').outerHeight(); showcaseHeight = (showcaseHeight * target) * -1; $('.showcase-menu').css({ top: showcaseHeight }); $(e).addClass('hover'); } // show the list item stuff of .active function backToDefault() { $('.main-menu li').removeClass('hover'); var activeItem = $('.main-menu li.active'); var target = activeItem.attr('data-target'); var showcaseHeight = $('.showcase-menu').outerHeight(); showcaseHeight = (showcaseHeight * target) * -1; $('.showcase-menu').css({ top: showcaseHeight }); activeItem.addClass('hover'); } // change active list item function changeActive(e) { $('.main-menu li').removeClass('active'); $(e).addClass('active'); }
This awesome jQuery plugin is developed by creme. For more Advanced Usages, please check the demo page or visit the official website.