如何让我的汉堡菜单出现？
[英]How can I make my hamburger menu to appear?
问题描述
我知道它可能很容易构建，但是当按下图标时我不能让我的汉堡菜单出现。 我认为问题出在javascript部分。 这是我的代码：
html:
<body>
<script src="script.js"></script>
<section id="header">
<a href="#"><img id="icon-home" src="iconos/menu.jpg" alt=""></a>
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="shop.html">shop</a></li>
<li><a href="blog.html">blog</a></li>
<li><a href="about.html">about</a></li>
<li><a href="contact.html">contact</a></li>
<li ><a href="cart.html"><i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16"><path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/></svg></i></a></li>
</ul>
</div>
<div id="mobile">
<a href="cart.html"><i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16"><path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/></svg></i></a>
<i id="bar" class="fas fa-outdent"></i>
</div>
</section>
css：这里我在屏幕+800像素时隐藏菜单，
#mobile{
display: none;
align-items: center;
}
@media (max-width:799px){
#navbar{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: fixed;
top: 0;
right: -300px;
height: 100vh;
width: 300px;
background-color: #fefefe;
box-shadow: 0 40px 60px rgb(0, 0, 0, 0.1);
padding: 80px 0 0 10;
}
#navbar.active{
right: 0px;
}
#navbar li{
margin-bottom: 25px;
}
#mobile{
display: flex;
align-items: center;
}
#mobile i{
color: #1a1a1a;
font-size: 24px;
padding-left: 20px;
}
}
js：我很确定问题应该出在这里（我认为我没有更多细节可以解释）
const bar = document.getElementById('bar');
const nav = document.getElementById('navbar');
if (bar) {
bar.addEventListener('click', () => {
nav.classList.add('active');
})
};
任何帮助都会比你有用！！！
3 个解决方案
解决方案1
0 2022-07-15 21:07:21
您忘记指定id='bar' 。
const bar = document.getElementById('bar'); const nav = document.getElementById('navbar'); if (bar) { bar.addEventListener('click', () => { if( !nav.classList.contains('active')) nav.classList.add('active'); else nav.classList.remove('active'); }) };
#navbar{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; position: fixed; top: 0; right: -300px; height: 100vh; width: 300px; background-color: #fefefe; box-shadow: 0 40px 60px rgb(0, 0, 0, 0.1); padding: 80px 0 0 10; transition: 1s right; } #navbar.active{ right: 0px; } #navbar li{ margin-bottom: 25px; } #mobile{ display: flex; align-items: center; } #mobile i{ color: #1a1a1a; font-size: 24px; padding-left: 20px; }
<section id="header"> <a id="bar" href="#"><img id="icon-home" src="iconos/menu.jpg" alt="">barLink</a> <div> <ul id="navbar"> <li><a class="active" href="index.html">Home</a></li> <li><a href="shop.html">shop</a></li> <li><a href="blog.html">blog</a></li> <li><a href="about.html">about</a></li> <li><a href="contact.html">contact</a></li> <li><a href="cart.html">cart</a></li> </ul> </div> <div id="mobile"> <a href="cart.html"><i><svg xmlns="http://www.w3.org/2000/svg" /></i></a> </div> </section>
解决方案2
0 2022-07-15 21:30:26
我不知道你是不是新手，所以有一个叫做 bootstrap 的东西，你可以用它来节省基本样式的时间，你可以在另一个 CSS 文件中添加额外的样式。
如果您遇到困难，只需运行我在下面提到的代码，然后要获得更多样式，您可以创建另一个 CSS 文件，将其链接到您的 HTML 文件，然后执行您的操作。 :D 也很抱歉我的英语不好。
主.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="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Document</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="shop.html">shop</a> </li> <li class="nav-item"> <a class="nav-link" href="blog.html">blog</a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">about</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">contact</a> </li> </ul> </div> </nav> </body> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </html>
解决方案3
-2 2022-07-15 21:02:40
仅适用于初学者 - 您的 HTML 在第 10 行和第 15 行无效（未关闭的<svg> 、 <a>和<li>标记）
我怎样才能让我的汉堡菜单更小，并在它周围有一个完美的圆形边框？
[英]How can I make my hamburger menu smaller and also have a perfect circular border around it?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.