Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Sep 28, 2018

Embed
What would you like to do?
Uber-like Navigation
<header>
<div class="nav">
<div class="title">
Navigation like on the <a href="https://www.uber.design/case-studies/rebrand-2018" target="_blank">Uber Rebrand Site</a>
</div>
<div class="toggle clicked">
<div class="bar"></div>
</div>
<nav class="open">
<div class="showcase">
<div class="showcase-container">
<ul class="showcase-menu">
<li>Hi!</li>
<li>Hover over the list items or click them!</li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/124740/ice-final-white.svg" alt=""></li>
<li class="overlay" style="background-image:url(https://images.unsplash.com/photo-1537949721120-e8f21f6698e6?ixlib=rb-0.3.5&s=96527c5eff0b3bd24946f77f4dc5a789&auto=format&fit=crop&w=634&q=80);">
Lorem ipsum
</li>
<li style="background-image:url(https://d2kbkpwf98wmwo.cloudfront.net/images/menu/motion.png);"></li>
<li>ABC</li>
<li style="background-image:url(https://images.unsplash.com/photo-1537914675540-ec9f82fbd752?ixlib=rb-0.3.5&s=7d427165e9b4e7aa8d80b19c9d0b3128&auto=format&fit=crop&w=1316&q=80);"></li>
<li style="background-image:url(https://d2kbkpwf98wmwo.cloudfront.net/images/menu/color.png);"></li>
</ul>
</div>
</div>
<div class="menu">
<ul class="main-menu">
<li class="active"><a href="#!">Introduction</a></li>
<li><a href="#!">The System</a></li>
<li><a href="#!">Logo</a></li>
<li><a href="#!">Composition</a></li>
<li><a href="#!">Motion</a></li>
<li><a href="#!">Typography</a></li>
<li><a href="#!">Photography</a></li>
<li><a href="#!">Color</a></li>
</ul>
</div>
</nav>
</div>
</header>
$(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
setTimeout(function() {
toggleMenu();
}, 2500);
});
// toggle menu
function toggleMenu() {
var toggle = $('.toggle');
var nav = $('nav');
if(toggle.hasClass('clicked')) {
toggle.removeClass('clicked');
nav.removeClass('open');
setTimeout(function() {
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');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
$main: #EF3340;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans', sans-serif;
}
*::selection {
background: rgba(0,0,0,.2);
color: #fff;
}
a {
text-decoration: none;
color: $main;
}
header {
.nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 80px;
background: rgba(0,0,0,.1);
.title {
line-height: 80px;
padding: 0 40px;
font-size: 24px;
}
.toggle {
position: absolute;
margin: auto;
width: 46px;
height: 46px;
right: 40px;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
cursor: pointer;
.bar {
position: relative;
width: 40px;
height: 2px;
background: #000;
&:before, &:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: inherit;
left: 0;
transform-origin: center center;
transition: transform .25s ease, top .25s ease, bottom .25s ease;
}
&:before {
top: -10px;
}
&:after {
bottom: -10px;
}
}
&.clicked {
.bar {
background: transparent;
&:before, &:after {
background: #000;
}
&:before {
transform: rotate(45deg);
top: 0;
}
&:after {
transform: rotate(-45deg);
bottom: 0;
}
}
}
}
nav {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
opacity: 0;
transition: opacity .5s ease;
.showcase {
background: #000;
flex: 1;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
.showcase-container {
width: 50%;
position: relative;
overflow: hidden;
&:before {
content: '';
display: block;
padding-top: 100%;
}
}
.showcase-menu {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: visible;
list-style-type: none;
transition: top .25s ease;
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;
&.overlay {
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.6);
z-index: -1;
}
}
}
}
}
.menu {
background: #fff;
flex: 1;
ul {
width: 100%;
padding: 80px 48px 24px 48px;
list-style-type: none;
max-height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
height: 10px;
&-button {
width: 0px;
height: 0px;
}
&-thumb {
background: rgba(0,0,0,.4);
border: 0px none #ffffff;
border-radius: 3px;
&:hover {
background: #000;
}
&:active {
background: #000;
}
}
&-track {
background: rgba(0,0,0,.1);
border: 0px none #ffffff;
border-radius: 0;
&:hover {
background: rgba(0,0,0,.1);
}
&:active {
background: rgba(0,0,0,.1);
}
}
&-corner {
background: transparent;
}
}
li {
display: flex;
flex-direction: row;
align-items: center;
.number {
display: inline-block;
padding: 0 0 0 80px;
overflow: hidden;
span {
display: block;
font-size: 48px;
font-weight: 400;
transition: transform .25s ease;
transform: translateY(100%);
}
}
a {
display: inline-block;
font-size: 48px;
color: #000;
line-height: 1;
padding: 24px 0 24px 80px;
transition: transform .25s ease;
}
&:hover {
a {
transform: translateX(20px);
}
}
&.hover {
.number {
span {
transform: translateY(0);
}
}
}
}
}
}
&.hidden {
display: none;
}
&.open {
opacity: 1;
.showcase {
animation: slideInLeft .5s cubic-bezier(.3, 0, .3, 1) forwards;
}
.menu {
animation: slideInRight .5s cubic-bezier(.3, 0, .3, 1) forwards;
}
}
}
}
}
@keyframes slideInRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.