汉堡包叠加菜单动画

Question

我正在为网站菜单创建动画。我创建了很多内容，但是问题是当重叠动画开始时，内容会更早出现。当叠加动画从左向右移动时，内容应出现。作为参考，请检查菜单动画https://www.mission-haut-brion.com，以下是我尝试的代码。任何帮助，将不胜感激。您可以在此处找到有效的代码。 https://jsfiddle.net/dk724f6p/。

    <header>
  <div >
    <h1><a href="index.html" style="font-size: 16px;"><img style="" src="assets/img/logo.jpg"></a></h1>
    <a href="refrences.html">REFERENCES</a>
    <a onclick="openNav()" style="filter: brightness(1);" href="#">
      <i ></i>
      <i ></i>
      <i ></i>
    </a>
  </div>

        <div id="myNav" class="overlay45">
          <header >
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <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;">
                    <a href="contact.html">Contact Us</a>
                  </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

检查此问题，我已解决您的问题。

   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"><a href="index.html" style="font-size: 16px;"><img style="" src="assets/img/logo.jpg" height="100" width="100" alt=""></a></h1>
    <a href="refrences.html" class="ref-menu-fix" style="">REFERENCES</a>
    <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()">&#9776; open</span> -->
  </div>
      
        <div id="myNav" class="overlay45">
          <header style="background-color: #1f1f1f; height: 100%;">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <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;">
                    <a href="contact.html">Contact Us</a>
                  </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>