我如何使我的汉堡菜单出现?

我知道也许它是很容易建立，但我不能使我的汉堡包菜单出现时，按下图标。我认为问题是在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:这里我隐藏菜单当屏幕是+ 800px，

#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');
})
};

这将是非常有用的任何帮助，比你!!

我不知道你是不是新手，所以有一个叫做bootstrap的东西，你可以用它来节省你的时间在基本的样式上，你可以在另一个CSS文件中添加额外的样式。

只要运行我下面提到的代码，如果你卡住了，然后更多的样式，你可以创建另一个CSS文件，链接到你的HTML文件，然后做你的东西。: D我也很抱歉我的英语不好。

main.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>

你忘了指定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>

相关内容

最新更新

热门标签：