HTML和Javascript“汉堡包菜单”不起作用

问题描述 投票：1回答：1

我想在我的html文件中使用.js脚本，但不幸的是，我的脚本无法以正确的方式运行:(。我为我的网站构建了一个响应式导航栏，并在小屏幕尺寸上带有“汉堡菜单”。我设法在较小的屏幕尺寸上显示“汉堡菜单”，但是如果单击它，导航栏将不会显示。这是我的html代码：

<!DOCTYPE html>
<html>
<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width", "initial-scale=1">


 <link rel="stylesheet" href="css/style.css">
 <script src="script/script.js"></script>

 <title>Title</title>

</head> 

<header>
 <nav class="navbar">
   <div class="branding">
     <a href="index.html"><img src="img/Logo.png" alt="Brand"></a>
   </div>
   <a href="#" class="toggle-button">
     <span class="bar"></span>
     <span class="bar"></span>
     <span class="bar"></span>
   </a>
   <div class="navbar-links">
     <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="artikel.html">Artikel</a></li>
       <li><a href="shop.html">Shop</a></li>
       <li><a href="handel.html">handel</a></li>
       <li><a href="kontakt.html">Kontakt</a></li>
     </ul>
   </div>
 </nav>
</header>


</body>

</html>

这里是我的CSS：

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

header{
  background-color: white;
  padding-top: 10px;
  min-height: 70px;
  border-bottom: black 3px solid;
  align-items: center;
}

.navbar{
  width: 80%;
  margin: auto;
  overflow: hidden;
  align-items: center;
}

.branding{
  float: left;
  margin: 0;
  padding: 0;
}

.navbar-links{
  margin-top: 25px;
  padding: 0;
  float: right;
}

.navbar-links ul{
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
}

.navbar-links ul li a{
  padding: 25px;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 500;
}

.navbar-links a:hover{
  color: #ffbf00;
}

.toggle-button{
  margin-top: 20px;
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar{
  height: 3px;
  width: 100%;
  color: black;
  background-color: black;
  border-radius: 10px;
}

@media (max-width: 1050px) {
  .toggle-button{
    display: flex;
  }

  .navbar-links{
    display: none;
    width: 100%;
  }

  .navbar{
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links ul{
    width: 100%;
    flex-direction: column;
  }

  .navbar-links li{
    text-align: center;
  }

  .navbar-links li a{
    padding: .5rem 1rem;
  }

  .navbar-links.active{
    display: flex;
  }
}

以及我想是我的JavaScript的重要部分：

const toggleButton = document.getElementsByClassName('toggleButton')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

抱歉，有很多代码，但是我想在您的帮助下找到错误，因此我发布了所有代码。谢谢

javascript html css navbar hamburger-menu
1个回答
0
投票

它将在toggle-button中不是toggleButton，>

const toggleButton = document.getElementsByClassName('toggle-button')[0];

const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
console.log(toggleButton);
toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})
body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

header{
  background-color: white;
  padding-top: 10px;
  min-height: 70px;
  border-bottom: black 3px solid;
  align-items: center;
}

.navbar{
  width: 80%;
  margin: auto;
  overflow: hidden;
  align-items: center;
}

.branding{
  float: left;
  margin: 0;
  padding: 0;
}

.navbar-links{
  margin-top: 25px;
  padding: 0;
  float: right;
}

.navbar-links ul{
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
}

.navbar-links ul li a{
  padding: 25px;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 500;
}

.navbar-links a:hover{
  color: #ffbf00;
}

.toggle-button{
  margin-top: 20px;
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar{
  height: 3px;
  width: 100%;
  color: black;
  background-color: black;
  border-radius: 10px;
}

@media (max-width: 1050px) {
  .toggle-button{
    display: flex;
  }

  .navbar-links{
    display: none;
    width: 100%;
  }

  .navbar{
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links ul{
    width: 100%;
    flex-direction: column;
  }

  .navbar-links li{
    text-align: center;
  }

  .navbar-links li a{
    padding: .5rem 1rem;
  }

  .navbar-links.active{
    display: flex;
  }
}
<!DOCTYPE html>
<html>
<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width", "initial-scale=1">


 <link rel="stylesheet" href="css/style.css">
 <script src="script/script.js"></script>

 <title>Title</title>

</head> 

<header>
 <nav class="navbar">
   <div class="branding">
     <a href="index.html"><img src="img/Logo.png" alt="Brand"></a>
   </div>
   <a href="#" class="toggle-button">
     <span class="bar"></span>
     <span class="bar"></span>
     <span class="bar"></span>
   </a>
   <div class="navbar-links">
     <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="artikel.html">Artikel</a></li>
       <li><a href="shop.html">Shop</a></li>
       <li><a href="handel.html">handel</a></li>
       <li><a href="kontakt.html">Kontakt</a></li>
     </ul>
   </div>
 </nav>
</header>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.