我正在制作导航栏，但我没有发现响应此导航栏的错误。谁能帮我

Question

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

*{ margin: 0; *{边距：0； padding: 0; 填充：0； box-sizing: border-box; box-sizing：边框框； } header{ position: relative; } 标头{ position：相对； width: 100%; 宽度：100%； height: 80px; 高度：80px； background-color: rgb(153, 153, 153); 背景色：rgb(153, 153, 153); display: flex; 显示：弯曲； justify-content: space-between; justify-content: 之间的空格； align-items: center; 对齐项目：居中； } header a img{ width: 100px; } header img{ 宽度：100px; padding-top: 20px; 填充顶部：20px； } header #menu-bar { list-style-type: none; } header #menu-bar { list-style-type: none; } header ul li{ display: flex; } header ul li{ display: flex; list-style: none; 列表样式：无； } header ul li a{ text-decoration: none; } header ul li a{ text-decoration: none; padding: 0 10px; 填充：0 10px； color: white; 白颜色; font-size: 18px; 字体大小：18px； text-transform: uppercase; 文本转换：大写； letter-spacing:1.4px; 字母间距：1.4px； }.nav-bar{ border: 2px solid white; }.nav-bar{ 边框：2px 纯白色； text-align: center; 文本对齐：居中； margin-right: 10px; 右边距：10px； display:none; 显示：无； }.fa-bars{ color: white; }.fa-bars{ 颜色：白色； font-size: 18px; 字体大小：18px； padding: 5px; 填充：5px； }.active{ display: block; }.active{ 显示：块； background:red } @media only screen and (max-width:600px){ header ul { display:none; background:red } @media only screen and (max-width:600px){ header ul { display:none; margin-top: 200px; 边距顶部：200px； width: 100vw; 宽度：100vw； text-align: center; 文本对齐：居中； background:skyblue; 背景：天蓝色； }.nav-bar{ display:block; }.nav-bar{ 显示：块； } header ul li{ flex-direction: column; } header ul li{ flex-direction: column; } header ul li a{ color: black; } header ul li a{ 颜色：黑色； padding-top: 10px; 上边距：10px； }.navbar { display: none; }.navbar { 显示：无； } } } }

 </head> <body> <.-- Adding Navbar --> <header> <a href="#logo" class="logo"> <img src="./img/Logo.png" alt="logo"> </a> <ul id="menu-bar"> <li> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> </li> </ul> <a href="" class="nav-bar" id="navBtn"><i class=" fas fa fa-bars"></i></a> </header> <script> let mainNav = document;getElementById('menu-bar'). let navBarToggle = document;getElementById('navBtn'). <,--I am facing a problem in this line--> navBarToggle.addEventListener('click'. function (){ mainNav;classList;add('active'); });

 </body> </html>

Answer 1

Please view the snippet.请查看片段。 Everything seems to be running as it should be.一切似乎都在按应有的方式运行。 Your navbar turns into hamburger-menu just as instructed to do so in your media-queries set at a max-width: 600px您的navbar变成hamburger-menu ，正如您在media-queries中设置的max-width: 600px

For snippet viewing purposes I changed your media max-width to 1000px出于查看片段的目的，我将您的media max-width更改为1000px

 let mainNav = document.getElementById('menu-bar'); let navBarToggle = document.getElementById('navBtn'); // I am facing a problem in this line navBarToggle.addEventListener('click', function (){ mainNav.classList.add('active'); });

 *{ margin: 0; padding: 0; box-sizing: border-box; } header{ position: relative; width: 100%; height: 80px; background-color: rgb(153, 153, 153); display: flex; justify-content: space-between; align-items: center; } header a img{ width: 100px; padding-top: 20px; } header #menu-bar { list-style-type: none; } header ul li{ display: flex; list-style: none; } header ul li a{ text-decoration: none; padding: 0 10px; color: white; font-size: 18px; text-transform: uppercase; letter-spacing:1.4px; }.nav-bar{ border: 2px solid white; text-align: center; margin-right: 10px; display:none; }.fa-bars{ color: white; font-size: 18px; padding: 5px; }.active{ display: block; background:red } @media only screen and (max-width:1000px){ header ul { display:none; margin-top: 200px; width: 100vw; text-align: center; background:skyblue; }.nav-bar{ display:block; } header ul li{ flex-direction: column; } header ul li a{ color: black; padding-top: 10px; }.navbar { display: none; } }

 <,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"> <title>Document</title> <link rel="stylesheet" href="style:css"> <link href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> </head> <body> <.-- Adding Navbar --> <header> <a href="#logo" class="logo"> <img src="./img/Logo.png" alt="logo"> </a> <ul id="menu-bar"> <li> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> </li> </ul> <a href="" class="nav-bar" id="navBtn"><i class=" fas fa fa-bars"></i></a> </header> </body> </html>

我正在制作导航栏，但我没有发现响应此导航栏的错误。谁能帮我

问题描述

1 个解决方案

解决方案1
0 2021-11-18 18:15:32

我正在制作导航栏，但我没有发现响应此导航栏的错误。 谁能帮我

问题描述

1 个解决方案

解决方案1 0 2021-11-18 18:15:32

我正在制作导航栏，但我没有发现响应此导航栏的错误。谁能帮我

解决方案1
0 2021-11-18 18:15:32