<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>
hello world
</h1>
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<script>
var el = document.querySelector('#toggle');
var ovrlays = document.querySelector('#overlay');
el.onclick = function () {
el.classList.toggle('active');
ovrlays.classList.toggle('open');
}
</script>
@import url(https://fonts.googleapis.com/css?family=Vollkorn|Roboto);
body {
background: #F5F5F5;
}
.container {
position: absolute;
width: 100%;
heigh: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #FF5252;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.container a:hover:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
font-family: 'Vollkorn', sans-serif;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
-webkit-transform: translateY(10px) translateX(0) rotate(45deg);
transform: translateY(10px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
-webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #FF5252;
border: none;
height: 2px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay {
pointer-events: none;
z-index: 998;
position: fixed;
height: 100vh;
width: 100%;
top: 0;
left: 0;
padding: 104px 0;
overflow: hidden;
}
.overlay nav {
pointer-events: none;
z-index: 998;
position: fixed;
height: 100vh;
width: 100%;
top: 0;
left: 0;
padding: 104px 0;
}
.overlay.open nav {
pointer-events: auto;
}
.overlay:before {
content: '';
z-index: 1;
position: absolute;
height: 100vh;
width: calc(50vw - 8px);
background: #000;
top: 0;
left: 0;
opacity: 0;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: opacity 0ms ease 500ms, -webkit-transform 500ms cubic-bezier(0.42, 0, 0.58, 1);
transition: opacity 0ms ease 500ms, -webkit-transform 500ms cubic-bezier(0.42, 0, 0.58, 1);
transition: opacity 0ms ease 500ms, transform 500ms cubic-bezier(0.42, 0, 0.58, 1);
transition: opacity 0ms ease 500ms, transform 500ms cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 500ms cubic-bezier(0.42, 0, 0.58, 1);
will-change: transform;
}
.overlay:after {
content: '';
z-index: 1;
position: absolute;
height: 100vh;
width: 50vw;
background: #000;
top: 0;
left: 50%;
opacity: 0;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: opacity 0ms ease 500ms, -webkit-transform 500ms cubic-bezier(0.42, 0, 0.58, 1);
transition: opacity 0ms ease 500ms, -webkit-transform 500ms cubic-bezier(0.42, 0, 0.58, 1);
transition: opacity 0ms ease 500ms, transform 500ms cubic-bezier(0.42, 0, 0.58, 1);
transition: opacity 0ms ease 500ms, transform 500ms cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 500ms cubic-bezier(0.42, 0, 0.58, 1);
will-change: transform;
}
.overlay.open {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
.overlay {
-webkit-transition: opacity 150ms ease;
transition: opacity 150ms ease;
opacity: 0;
z-index: 2;
position: relative;
}
.overlay.open:before,
.overlay.open:after {
webkit-transition: -webkit-transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
opacity: .8;
}
/* .overlay-menu.open li {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
} */
.overlay .overlay-menu ul li {
-webkit-transform: translate3d(5px, 40px, 0);
transform: translate3d(5px, 40px, 0);
opacity: 0;
-webkit-transition: opacity 0ms, -webkit-transform 0ms;
transition: opacity 0ms, -webkit-transform 0ms;
transition: transform 0ms, opacity 0ms;
transition: transform 0ms, opacity 0ms, -webkit-transform 0ms;
}
.overlay.open li:nth-of-type(1) {
-webkit-transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 550ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 575ms;
transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 550ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 575ms;
transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 575ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 550ms;
transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 575ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 550ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 575ms;
}
.overlay.open .overlay-menu ul li:nth-of-type(2) {
-webkit-transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 600ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms;
transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 600ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms;
transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 600ms;
transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 600ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms;
}
.overlay.open .overlay-menu ul li:nth-of-type(3) {
-webkit-transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 725ms;
transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 725ms;
transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 725ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms;
transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 725ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 725ms;
}
.overlay.open .overlay-menu ul li:nth-of-type(4) {
-webkit-transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 700ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 800ms;
transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 700ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 800ms;
transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 800ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 700ms;
transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 800ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 700ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 800ms;
}
/* .overlay-menu ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay-menu ul li {
-webkit-transform: translate3d(5px, 40px, 0);
transform: translate3d(5px, 40px, 0);
opacity: 0;
-webkit-transition: opacity 0ms, -webkit-transform 0ms;
transition: opacity 0ms, -webkit-transform 0ms;
transition: transform 0ms, opacity 0ms;
transition: transform 0ms, opacity 0ms, -webkit-transform 0ms;
}
*/
/* .overlay ul li a:after {
content: '';
position: absolute;
width: 30px;
height: 2px;
top: 50%;
left: 0px;
background-color: #fff;
-webkit-transform: scaleX(0) translate3d(100px, 0, 0);
transform: scaleX(0) translate3d(100px, 0, 0);
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
-webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
} */
/* .overlay ul li a {
webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
} */
.overlay ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
/* webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0); */
/* position: relative;
padding: 16px 20px;
display: inline-block;
font-family: "ModernMTStd-Wide", sans-serif;
font-size: 32px;
line-height: 1.2em;
color: #fff;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
-webkit-transition: -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1); */
}
.overlay-menu ul li a:hover,
.overlay-menu ul li a:focus {
-webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.overlay-menu ul li a {
position: relative;
padding: 16px 20px;
text-decoration: none;
display: inline-block;
font-size: 48px;
line-height: 1.2em;
color: #fff;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
-webkit-transition: -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.overlay-menu ul li a:before {
content: '';
position: absolute;
width: 30px;
height: 2px;
top: 50%;
left: 0px;
background-color: #fff;
-webkit-transform: scaleX(0) translate3d(100px, 0, 0);
transform: scaleX(0) translate3d(100px, 0, 0);
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
.overlay-menu ul li a:hover:before,
.overlay-menu ul li a:focus:before {
-webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: scaleX(1) translate3d(-20px, 0, 0);
transform: scaleX(1) translate3d(-20px, 0, 0);
}
.overlay.open .overlay-menu ul li {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
.overlay .overlay-menu ul li {
-webkit-transform: translate3d(5px, 40px, 0);
transform: translate3d(5px, 40px, 0);
opacity: 0;
-webkit-transition: opacity 0ms, -webkit-transform 0ms;
transition: opacity 0ms, -webkit-transform 0ms;
transition: transform 0ms, opacity 0ms;
transition: transform 0ms, opacity 0ms, -webkit-transform 0ms;
}
// $('#toggle').click(function() {
// $(this).toggleClass('active');
// $('#overlay').toggleClass('open');
// });
