<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Side Menu Animation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="nav">
<a href="#" class="nav__trigger">
<div class="bars"></div>
</a>
<div class="nav__content">
<nav class="nav__list">
<ul>
<li class="nav__item"><a href="#">Home</a></li>
<li class="nav__item"><a href="#">About</a></li>
<li class="nav__item"><a href="#">Team</a></li>
<li class="nav__item"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="content">
<h1>Side Menu Animation</h1>
<h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/kjbrum/side-menu-animation-KmvReR */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300,700);
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
font-family: "Raleway", "Open Sans", sans-serif;
background-color: #ebf4ee;
min-height: 100%;
}
h1, h2, h3,
h4, h5, h6 {
font-family: "Raleway", "Open Sans", sans-serif;
margin: 0;
}
a {
color: #222222;
text-decoration: none;
}
.content {
position: absolute;
top: 50%;
left: 2rem;
width: 70%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.content h1,
.content h4 {
color: #1f2822;
}
.content h1 {
font-size: 6vmin;
}
.content h4 {
font-size: 3vmin;
}
.content a {
color: #1f2822;
}
.nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 3.75rem;
background-color: #1f2822;
transition: 1s cubic-bezier(0.645, 0.045, 0.355, 1);
will-change: width;
z-index: 99;
}
.nav.is-active {
width: 100%;
}
.nav__trigger {
display: block;
position: absolute;
top: 50%;
right: 1rem;
margin-top: -10px;
padding: 8px 0;
transition: 0.2s ease-in-out;
z-index: 10;
}
.nav__trigger .bars {
position: relative;
}
.nav__trigger .bars, .nav__trigger .bars:before, .nav__trigger .bars:after {
width: 28px;
height: 4px;
background-color: #9ac6ac;
border-radius: 4px;
transition: 0.2s ease-in-out;
}
.nav__trigger .bars:before, .nav__trigger .bars:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
will-change: transform;
}
.nav__trigger .bars:before {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
.nav__trigger .bars:after {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
.nav__trigger.is-active {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nav__trigger.is-active .bars:before, .nav__trigger.is-active .bars:after {
-webkit-transform: translateX(0) rotate(-90deg);
transform: translateX(0) rotate(-90deg);
}
.nav__content {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
max-width: 1200px;
padding: 1rem 3.75rem 1rem 2.75rem;
opacity: 0;
visibility: hidden;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: 0s linear 0.25s;
}
.nav__content.is-active {
visibility: visible;
opacity: 1;
transition: 0s linear;
}
.nav__content.is-active .nav__item a {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
transition-property: opacity, color, -webkit-transform;
transition-property: transform, opacity, color;
transition-property: transform, opacity, color, -webkit-transform;
transition-duration: 0.55s, 0.55s, 0.3s;
transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1), ease-in-out, ease-in-out;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(1) a {
transition-delay: 0s, 0s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(2) a {
transition-delay: 0.05s, 0.05s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(3) a {
transition-delay: 0.1s, 0.1s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(4) a {
transition-delay: 0.15s, 0.15s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(5) a {
transition-delay: 0.2s, 0.2s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(6) a {
transition-delay: 0.25s, 0.25s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(7) a {
transition-delay: 0.3s, 0.3s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(8) a {
transition-delay: 0.35s, 0.35s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(9) a {
transition-delay: 0.4s, 0.4s, 0s;
}
.nav__list ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav__item {
overflow: hidden;
}
.nav__item a {
display: inline-block;
padding: 1rem;
color: #9ac6ac;
text-decoration: none;
font-size: 3rem;
font-size: 10vw;
font-size: 14vmin;
font-weight: 300;
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
will-change: transform, opacity;
}
.nav__item a:hover {
color: white;
}
.nav__divider {
margin: 1.75rem 0 1.5rem;
width: 100%;
height: 2px;
background-color: #9ac6ac;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/*Downloaded from https://www.codeseek.co/kjbrum/side-menu-animation-KmvReR */
var navigation = {
// Variables
$nav: document.querySelector('.nav'),
$navTrigger: document.querySelector('.nav__trigger'),
$navContent: document.querySelector('.nav__content'),
$navList: document.querySelector('.nav__list'),
transitionEnd: 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
init: function init() {
var self = this;
// Handle the transitions
self.$navTrigger.addEventListener('click', function () {
if (!self.$navTrigger.classList.contains('is-active')) {
// .nav--trigger active
self.$navTrigger.classList.add('is-active');
// .nav active
if (!self.$nav.classList.contains('is-active')) {
self.$nav.classList.add('is-active');
self.$nav.addEventListener('transitionend', function (e) {
if (e.propertyName == 'width' && self.$navTrigger.classList.contains('is-active')) {
// .nav__content active
self.$navContent.classList.add('is-active');
}
});
} else {
self.$navContent.classList.add('is-active');
}
// no-csstransitions fallback
if (document.documentElement.classList.contains('no-csstransitions')) {
self.$navContent.classList.add('is-active');
}
} else {
// .nav--trigger inactive
self.$navTrigger.classList.remove('is-active');
// .nav__content inactive
if (self.$navContent.classList.contains('is-active')) {
self.$navContent.classList.remove('is-active');
self.$navContent.addEventListener('transitionend', function (e) {
if (e.propertyName == 'opacity' && !self.$navTrigger.classList.contains('is-active')) {
// .nav inactive
self.$nav.classList.remove('is-active');
}
});
} else {
self.$nav.classList.remove('is-active');
}
// no-csstransitions fallback
if (document.documentElement.classList.contains('no-csstransitions')) {
self.$nav.classList.remove('is-active');
}
}
});
}
};
navigation.init();
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Font Awesome
Normalize
