I know that maybe it´s sth easy to build, but I can´t make my hamburger menu appear when pressing the icon. I think that the problem is in the javascript part. here is my code:
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 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" 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" 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" ></i>
</div>
</section>
css: Here I hide the menu when the screen is 800 px,
#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: im quite sure that the problem should be here (I do not have more details to explain I think)
const bar = document.getElementById('bar');
const nav = document.getElementById('navbar');
if (bar) {
bar.addEventListener('click', () => {
nav.classList.add('active');
})
};
It would be realy useful any help, than u!!!
CodePudding user response：
I don't know if you are new or not, so there is something called bootstrap that you can use to save your time with basic styling and you can make additional styling in another CSS file.
Just run the code I mentioned below if you are stuck badly, and then for more styling, you can create another CSS file, link that to your HTML file, and then do your stuff. :D also sorry for my bad English.
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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav >
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarNav">
<ul >
<li >
<a href="index.html">Home <span >(current)</span></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>
</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/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV 2 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3 MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>CodePudding user response：
You forgot to specify 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 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>CodePudding user response：
Just for starters - your HTML is invalid (unclosed <svg>, <a> and <li> tags) on lines 10 and 15