Hamburger Overlay menu animation - html

Question

I'm creating an animation for a website menu. I created much of it, But The problem is when the overlay animation starts, the content appears earlier. The content should appear as the overlay animation moves from left to right. For reference, please check the menu animation here, https://www.mission-haut-brion.com, Below is the code that I have tried. Any help would be appreciated.
You can find a working fiddle here of the code. https://jsfiddle.net/dk724f6p/.
<header>
<div >
<h1><img style="" src="assets/img/logo.jpg"></h1>
REFERENCES
<a onclick="openNav()" style="filter: brightness(1);" href="#">
<i ></i>
<i ></i>
<i ></i>
</a>
</div>
<div id="myNav" class="overlay45">
<header >
×
<div id="overlay-content" >
<div ></div>
<div >
<div>
<div >
<img src="assets/img/logo2.png>
</div>
</div>
<div >
<div></div>
<div>
<a id="menu-anim-fix">Home Page</a>
</div>
<div>
<a>Our Offer</a>
</div>
<div></div>
</div>
<div>
<div></div>
<div>
<a id="menu-anim-fix" href="ourwork.html">Our Work</a>
</div>
<div class="col-sm-12 col-md-4" style="text-align: right;">
<a id="menu-anim-fix" href="stepform.html">Order Us</a>
</div>
<div class="col-sm-12 col-md-2"></div>
</div>
<div class="row mb-5">
<div class="col-sm-12 col-md-2"></div>
<div class="col-sm-12 col-md-4">
<a id="menu-anim-fix" href="website-art.html">Website Art</a>
</div>
<div class="col-sm-12 col-md-4" style="text-align: right;">
Contact Us
</div>
<div class="col-sm-12 col-md-2"></div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12" style="text-align: center;">
<a id="menu-anim-fix" href="refrences.html">REFERENCES</a>
</div>
</div>
<div class="row mt-5">
<div class="col-md-12 mt-5" style="text-align: center;">
<p class="mt-5" style="color: #fff;font-size: 12px;">2019- All Rights Reserved</p>
</div>
</div>
</div>
<div class="col-md-2" style="border-left: 1px solid #fff" ></div>
</div>
</header>
</div>
</header>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
setTimeout(function(){
document.getElementById("overlay-content").style.display = "flex";
// document.getElementById("menu-anim-fix").style.display = "flex";
}, 100);
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("overlay-content").style.display = "none";
}
</script>
</body>
</html>
header a {
letter-spacing: 8px;
text-transform: uppercase;
color: #fff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
text-decoration:none !important;
}
header a:hover {
color: #d3a356;
letter-spacing: 10px;
}
.overlay45 {
height: 100%;
width: 0;
position: fixed;
z-index: 49;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 1s;
}
.overlay-content{
transition: 1s;
}
.overlay45 a {
display: block;
transition: 0.3s;
}
/*.overlay-content {
position: relative;
width: 100%;
}*/
.overlay45 .closebtn {
position: absolute;
top: -10px;
right: 65px;
font-size: 60px;
z-index: 50;
}
#media screen and (max-height: 450px) {
.overlay45 a {font-size: 20px}
.overlay45 .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media screen and (max-width: 600px) {
.overlay45 .closebtn {
position: absolute;
top: -10px;
right: 20px;
font-size: 60px;
z-index: 50;
}
}
#media screen and (max-width: 767px) {
header .col-sm-12 {
text-align: center !important;
}
header .col-md-2 {
border-right: none !important;
border-left: none !important;
}
}
.refrences-website-fix{
padding-top: 10%;
}
.refrences-website-fix a{
font-size: 35px;
font-weight: 900;
}
.refrences-website-fix .corvin:hover
{
background-image: url(../img/logo.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header-top {
padding: 0 10px !important;
}
.header-top img{
width: 50px;
height: 50px;
}
#media screen and (max-width: 760px) {
.header-top img{
width: 80px;
height: 80px;
}
}
.header-top {
padding: 0 60px;
position: fixed;
top: 0;
width: 100%;
z-index: 16;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.header-top a{
/*color: grey !important;*/
}
.header-top i{
background: #fff !important;
}
h1 {
line-height: 70px;
height: 70px;
}
h1 a {
display: block;
padding: 0 10px;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 20px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: white;
width: 24px;
left: 10px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
/*.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
-ms-transform: rotate(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent !important;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
-ms-transform: rotate(-45deg);
transform: rotateZ(-45deg);
}*/
nav {
height: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background:#000;
position: fixed;
width: 100%;
/* -webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;*/
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 1s, visibility 0s 1s;
transition: opacity 1s, visibility 0s 1s;
z-index: 15;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.ref-menu-fix{
text-align: center;
margin: 0 auto;
width: 50%;
font-size: 24px;
letter-spacing: 8px;
color: #fff !important;
margin-top:20px;
text-transform: uppercase;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 20px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: white;
width: 24px;
left: 10px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}

Answer 1

Check this, i have fixed your issue..
function openNav() {
document.getElementById("myNav").style.left = "0";
setTimeout(function(){
document.getElementById("overlay-content").style.display = "flex";
// document.getElementById("menu-anim-fix").style.display = "flex";
}, 100);
}
function closeNav() {
document.getElementById("myNav").style.left = "-100%";
document.getElementById("overlay-content").style.display = "none";
}
header a {
letter-spacing: 8px;
text-transform: uppercase;
color: #fff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
text-decoration:none !important;
}
header a:hover {
color: #d3a356;
letter-spacing: 10px;
}
.overlay45 {
height: 100%;
width: 100%;
position: fixed;
z-index: 49;
top: 0;
left: -100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 1s;
}
.overlay-content{
transition: 1s;
}
.overlay45 a {
display: block;
transition: 0.3s;
}
/*.overlay-content {
position: relative;
width: 100%;
}*/
.overlay45 .closebtn {
position: absolute;
top: -10px;
right: 65px;
font-size: 60px;
z-index: 50;
}
#media screen and (max-height: 450px) {
.overlay45 a {font-size: 20px}
.overlay45 .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media screen and (max-width: 600px) {
.overlay45 .closebtn {
position: absolute;
top: -10px;
right: 20px;
font-size: 60px;
z-index: 50;
}
}
#media screen and (max-width: 767px) {
header .col-sm-12 {
text-align: center !important;
}
header .col-md-2 {
border-right: none !important;
border-left: none !important;
}
}
.refrences-website-fix{
padding-top: 10%;
}
.refrences-website-fix a{
font-size: 35px;
font-weight: 900;
}
.refrences-website-fix .corvin:hover
{
background-image: url(../img/logo.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header-top {
padding: 0 10px !important;
}
.header-top img{
width: 50px;
height: 50px;
}
#media screen and (max-width: 760px) {
.header-top img{
width: 80px;
height: 80px;
}
}
.header-top {
padding: 0 60px;
position: fixed;
top: 0;
width: 100%;
z-index: 16;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.header-top a{
/*color: grey !important;*/
}
.header-top i{
background: #fff !important;
}
h1 {
line-height: 70px;
height: 70px;
}
h1 a {
display: block;
padding: 0 10px;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 20px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: white;
width: 24px;
left: 10px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
/*.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
-ms-transform: rotate(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent !important;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
-ms-transform: rotate(-45deg);
transform: rotateZ(-45deg);
}*/
nav {
height: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background:#000;
position: fixed;
width: 100%;
/* -webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;*/
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 1s, visibility 0s 1s;
transition: opacity 1s, visibility 0s 1s;
z-index: 15;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.ref-menu-fix{
text-align: center;
margin: 0 auto;
width: 50%;
font-size: 24px;
letter-spacing: 8px;
color: #fff !important;
margin-top:20px;
text-transform: uppercase;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 20px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: white;
width: 24px;
left: 10px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: #000;">
<header>
<div class="header-top clearfix">
<h1 class="l-left link"><img style="" src="assets/img/logo.jpg" height="100" width="100" alt=""></h1>
REFERENCES
<a class="l-right link toggle-menu" style="cursor:pointer;" onclick="openNav()" style="filter: brightness(1);" href="#">
<i ></i>
<i ></i>
<i ></i>
</a>
<!-- <span class="l-right link toggle-menu" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> -->
</div>
<div id="myNav" class="overlay45">
<header style="background-color: #1f1f1f; height: 100%;">
×
<div class="row overlay-content" id="overlay-content" style="height: 100%; position: fixed;display: none;width: 100%;">
<div class="col-md-2" style="border-right: 1px solid #fff" ></div>
<div class="col-md-8">
<div class="row mt-5">
<div class="col-md-12" style="text-align: center;">
<img src="assets/img/logo2.png" style="width: 20%; margin: 1 auto;" alt="">
</div>
</div>
<div class="row mb-5">
<div class="col-sm-12 col-md-2"></div>
<div class="col-sm-12 col-md-4">
<a id="menu-anim-fix" href="index.html">Home Page</a>
</div>
<div class="col-sm-12 col-md-4" style="text-align: right;">
<a id="menu-anim-fix" href="ouroffer.html">Our Offer</a>
</div>
<div class="col-sm-12 col-md-2"></div>
</div>
<div class="row mb-5">
<div class="col-sm-12 col-md-2"></div>
<div class="col-sm-12 col-md-4">
<a id="menu-anim-fix" href="ourwork.html">Our Work</a>
</div>
<div class="col-sm-12 col-md-4" style="text-align: right;">
<a id="menu-anim-fix" href="stepform.html">Order Us</a>
</div>
<div class="col-sm-12 col-md-2"></div>
</div>
<div class="row mb-5">
<div class="col-sm-12 col-md-2"></div>
<div class="col-sm-12 col-md-4">
<a id="menu-anim-fix" href="website-art.html">Website Art</a>
</div>
<div class="col-sm-12 col-md-4" style="text-align: right;">
Contact Us
</div>
<div class="col-sm-12 col-md-2"></div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12" style="text-align: center;">
<a id="menu-anim-fix" href="refrences.html">REFERENCES</a>
</div>
</div>
<div class="row mt-5">
<div class="col-md-12 mt-5" style="text-align: center;">
<p class="mt-5" style="color: #fff;font-size: 12px;">2019- All Rights Reserved</p>
</div>
</div>
</div>
<div class="col-md-2" style="border-left: 1px solid #fff" ></div>
</div>
</header>
</div>
</header>
</body>
</html>