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.