Question

当屏幕小于768px时，将显示汉堡菜单。然后它通过transform：translateX（100％）属性向右移动，以便它移动到右侧，因此它不会出现在屏幕上，当我单击汉堡包菜单时它会返回，但是在保存时会返回使用我不想要的空间。问题就在那里。

隐藏菜单后，它会在右侧使用一个空格，并增加我的宽度并遮盖整个页面

我在代码检查中给出了它，是通过将所有内容放到正确的位置来增加宽度，是否有可能解决此问题？

我在这里有Codepen：

```  https://codepen.io/Marvinfx/pen/XWroWxW ```

const navSlide = () => {
     const burger = document.querySelector('.burger');
     const nav = document.querySelector('.nav-links');
     const navLinks = document.querySelectorAll(".nav-links li");

    
  burger.addEventListener('click' ,()=> 
      // Toggle Nav */
     {nav.classList.toggle('nav-active');
    

     //Animate Links */
     navLinks.forEach((link, index) => {
               if (link.style.animation) {
                   link.style.animation="";
               } else {
                    link.style.animation = `navLinksFade 0.5s ease forwards ${index / 7 + 0.3}s`;
               }
          
     });
       //Burger Animation
       burger.classList.toggle('toggle');
  });
     


}

navSlide();

* {
     margin:0px;
     padding: 0px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -o-transition-box-sizing:border-box;
     box-sizing: border-box;
     -webkit-tap-highlight-color: transparent;
     -webkit-font-smoothing: antialiased;

}


nav{
     display:flex;
     justify-content:space-around;
     align-items:center;
     min-height:8vh;
     background-color:#5d4954;
     font-family: 'Poppins', sans-serif;
}

.logo {
     color:rgb(226,226,226);
     text-transform: uppercase;
     letter-spacing: 5px;
     font-size:20px;
}

.nav-links {
     display:flex;
     justify-content: space-around;
     width:30%;
}

.nav-links li {
     list-style:none;
}

.nav-links a {
     color:rgb(226,226,226);
     text-decoration: none;
     letter-spacing: 3px;
     font-weight: bold;
     font-size:14px;
}
.burger {
     display:none;
     cursor:pointer;
}
.burger div {
     width:25px;
     height:3px;
     background-color:rgb(226,226,226);
     margin:5px;
     transition: all 0.3s ease;
}

@media screen and (max-width:1024px) {
     .nav-links {
          width:68%;
     }

}

@media screen and (max-width:768px) {
     
     body {
          overflow-x:hidden;
     }

     .nav-links {
     position: absolute;
     right:0px;
     height:92vh;
     top:8vh;
     background-color:#5d4954;
     display:flex;
     flex-direction:column;
     align-items:center;
     width:50%;
     transform:translateX(100%); /* 100 % */
     transition: transform .5s ease-in;
     }
      
     .nav-links li {
          opacity:0;
     }
     .burger {
          display:block;
     }
}

.nav-active {
     transform: translateX(0%);
}

@keyframes navLinksFade {
     from {
          opacity:0;
          transform: translateX(50px);
     }
     to {
          opacity:1;
          transform:translateX(0px);
     }
}

.toggle .line1 {
     transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
     opacity:0;
}
.toggle .line3 {
     transform: rotate(45deg) translate(-5px,-6px);
}

<!DOCTYPE html>
<html lang="es">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Navigation</title>
     <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/styles.css">
    
    
<body>
     <nav>
            <div class="logo">
               <h4>The Nav</h4>
            </div>
             <ul class="nav-links">
               <li><a href="#">Home</a>
               </li>
               <li><a href="#">About</a>
               </li>
               <li><a href="#">Works</a>
               </li>
               <li><a href="#">Projects</a>
               </li>
           </ul>
           <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
           </div>
     </nav>

<script type = "text/javascript" src = "js/js.js"></script>
</body>
</html>

谢谢！

隐藏菜单时该怎么办不占用空间？

0 个答案: