我的汉堡菜单显示不正确

Question

Hello I'm working on a frontend mentor challenge and encountered a bug when I click my hamburger menu it seems to remove the middle bar, my intentions were to make an X appear and have the li's come easing in from the left, can anyone tell me what I did wrong?你好，我正在进行前端导师挑战，当我单击汉堡菜单时遇到了一个错误，它似乎删除了中间栏，我的意图是让 X 出现并让 li 从左侧缓和，谁能告诉我做错了什么？ I'm teaching myself how to develop and maintain sites.我正在自学如何开发和维护网站。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <title>Angel News</title>
</head>
<body>
    <div id="con">
        <nav class="navbar">
            <a href="#" class="nav-branding">W.</a>
            <ul class="nav-menu">
                <li class="nav-menu">
                    <a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-menu">
                    <a href="#" class="nav-link">News</a>
                </li>
                <li class="nav-menu">
                    <a href="#" class="nav-link">Popular</a>
                </li>
                <li class="nav-menu">
                    <a href="#" class="nav-link">Trending</a>
                </li>
                <li class="nav-menu">
                    <a href="#" class="nav-link">Catergories</a>
                </li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
        <div class="section1">
            <img src="" alt="">
            <h2 class="section1-h2">The Bright Future of Web 3.0?</h2>
            <p class="section1-p">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people. But is it really fulfilling it's promise?</p>
            <a href="#">Read More</a>
        </div>
        <div class="section2">
            <div class="section2-inside">
                <h3 class="section2-h3">New</h3>
                <div class="insidesection2-1">
                    <h4>Hydrogen VS Electric Cars</h4>
                    <p>Will hydrogen-fueled cars ever catch up to EV's?</p>
                </div>
                <div class="insidesection2-2">
                    <h4>The Downsides og AI Artistry</h4>
                    <p>What are the possible adverse effects of on-demand AI image generation?</p>
                </div>
                <div class="insidesection2-3">
                    <h4>Is VC Funding Drying Up?</h4>
                    <p>Private funding by VC firms is down 50% YOY. We take a look at what that means.</p>
                </div>
            </div>
        </div>
        <div class="section3">
            <div class="section3-1">
                <img src="" alt="">
                <div class="insidesection3-1">
                    <h4 class="insidesection3-1-h4">01</h4>
                    <h5 class="insidesection3-1-h5">Reviving Retro PCs</h5>
                    <p>What happens when old PCs are given modern upgrades?</p>
                </div>
            </div>
            <div class="section3-2">
                <img src="" alt="">
                <div class="insidesection3-2">
                    <h4 class="insidesection3-2-h4">02</h4>
                    <h5 class="insidesection3-2-h5">Top 10 Laptops of 2023</h5>
                    <p>Our best picks for various needs and budgets.</p>
                </div>
            </div>
            <div class="section3-3">
                <img src="" alt="">
                <div class="insidesection3-3">
                    <h4 class="insidesection3-3-h4">03</h4>
                    <h5 class="insidesection3-3-h5">The Growth of Gaming</h5>
                    <p>How the pandemic has sparked fresh opportunities.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

li {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}

.navbar {
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

.nav-branding {
  font-size: 2rem;
}

.nav-link {
  transition: 0.7s ease;
}

.nav-link:hover {
  color: hsl(35deg, 77%, 62%);
}

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: black;
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: rotateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: rotateY(-8px) rotate(-45deg);
  }
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    gap: 0;
    flex-direction: column;
    width: 100%;
    background-color: black;
    text-align: center;
    transition: 0.3s;
  }
  .nav-item {
    margin: 16px 0;
  }
  .nav-menu.active {
    left: 0;
  }
}

const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');

hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('active')
    navMenu.classList.toggle('active')
})

Answer 1

Please try to use translateY instead of RotateY in your css @media tag as follows:请尝试在您的 css @media 标签中使用 translateY 而不是 RotateY，如下所示：

.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

我的汉堡菜单显示不正确

问题描述

1 个解决方案

解决方案1
0 2023-01-06 19:45:01

我的汉堡菜单显示不正确

问题描述

1 个解决方案

解决方案1 0 2023-01-06 19:45:01

解决方案1
0 2023-01-06 19:45:01