Here in my code the navbar expands on clicking menu button and shows all the items like home,blog etc but the whole navbar doesnt collapse back to start on clicking same menu button.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>navbar</title>
<style type="text/css" media="all">
/*
Don't use overflow: hidden; inside the body tag or even * tag as it can cause problems. Use only in container and branding tag.
*/
body {
padding: 0px;
margin: 0;
box-sizing: border-box;
}
nav {
background: #333;
color: white;
padding: 5px;
border-bottom: 1px solid black;
overflow: hidden;
}
#container {
padding: 5px;
overflow: hidden;
}
#container #Branding a {
float: left;
text-decoration: none;
color: white;
font-size: 27px;
margin-top: 3px;
}
#container button {
float: right;
padding: 7px;
background: white;
margin-top: 10px;
width: 30%;
color: black;
border: none;
cursor: pointer;
}
#list li a {
text-decoration: none;
cursor: pointer;
color: white;
padding: 5px;
margin: 2px;
display: block;
}
#list li {
list-style: none;
}
#list {
display: none;
}
.hide {
display: none;
}
header {
background: teal;
padding: 30px;
font-family: Monospace;
font-size: 22px;
color: white;
text-align: center;
min-height: 30vh;
}
header #Heading h1 {
margin-top: 30px;
}
.content {
color: #333;
margin-top: 10px;
padding: 0px 5px;
font-family: Monospace;
}
.content p {
padding: 20px;
margin: 5px;
}
footer {
background: #333;
color: white;
text-align: center;
width: 100%;
padding: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<nav>
<div id="container">
<div id="Branding">
<a href="#">Navbar</a>
<button id="toggle" >Menu</button>
</div>
</div>
<div id="list">
<li><a href="#">Home</a></li>
<li><a href="#footer">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</div>
</nav>
<header>
<div id="Heading">
<h1>Welcome</h1>
<p>
A dummy website
</p>
</div>
</header>
<div class="content">
<br />
<center><h1>Hello There,</h1>
<p>
This is a dummy website created for mobile devices. It is currently not optimised for computers and may look awkward on big screens.
</p>
<p>
I will redesign it in future and at that point it will be optimised for big screen devices like desktops and tablets too.
</p>
<p>
Rest, This webpage doesn't have too much javascript embedded and no backend too. It is just a static webpage. I tried to make it beautiful but I am not a UI designer.
</p>
</center>
</div>
<footer id="footer">
copyright 2020 © Dummy Website
</footer>
<script type="text/javascript" charset="utf-8">
alert('This website is not optimised for desktop devices. Will show correctly only on mobile devices. Also Navbar Doesnt toggle backs up, I will fix that soon.')
// adding event listener document.getElementById('toggle').addEventListener('click',() => {
if(document.getElementById('list').style.display = 'none'){
expand()
}else if(document.getElementById('list').style.display != 'none'){
collapse()
}
})
function expand() {
document.getElementById('list').style.display = 'block';
}
function collapse() {
document.getElementById('list').style.display = 'none';
}
</script>
</body>
</html>
Here in the javascript section I am using event listener to make the button work. Can you help me to make it collapse again ?
// adding event listener
document.getElementById('toggle').addEventListener('click',() => {
if(document.getElementById('list').style.display = 'none'){
expand()
}else if(document.getElementById('list').style.display != 'none'){
collapse()
}
})
function expand() {
document.getElementById('list').style.display = 'block';
}
function collapse() {
document.getElementById('list').style.display = 'none';
}
</script
>
The code you have written is correct, just a silly mistake is there, instead of
if(document.getElementById('list').style.display = 'none'
it should be
if(document.getElementById('list').style.display == 'none'
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>navbar</title>
<style type="text/css" media="all">
/*
Don't use overflow: hidden; inside the body tag or even * tag as it can cause problems. Use only in container and branding tag.
*/
body {
padding: 0px;
margin: 0;
box-sizing: border-box;
}
nav {
background: #333;
color: white;
padding: 5px;
border-bottom: 1px solid black;
overflow: hidden;
}
#container {
padding: 5px;
overflow: hidden;
}
#container #Branding a {
float: left;
text-decoration: none;
color: white;
font-size: 27px;
margin-top: 3px;
}
#container button {
float: right;
padding: 7px;
background: white;
margin-top: 10px;
width: 30%;
color: black;
border: none;
cursor: pointer;
}
#list li a {
text-decoration: none;
cursor: pointer;
color: white;
padding: 5px;
margin: 2px;
display: block;
}
#list li {
list-style: none;
}
#list {
display: none;
}
.hide {
display: none;
}
header {
background: teal;
padding: 30px;
font-family: Monospace;
font-size: 22px;
color: white;
text-align: center;
min-height: 30vh;
}
header #Heading h1 {
margin-top: 30px;
}
.content {
color: #333;
margin-top: 10px;
padding: 0px 5px;
font-family: Monospace;
}
.content p {
padding: 20px;
margin: 5px;
}
footer {
background: #333;
color: white;
text-align: center;
width: 100%;
padding: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<nav>
<div id="container">
<div id="Branding">
<a href="#">Navbar</a>
<button id="toggle" >Menu</button>
</div>
</div>
<div id="list">
<li><a href="#">Home</a></li>
<li><a href="#footer">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</div>
</nav>
<header>
<div id="Heading">
<h1>Welcome</h1>
<p>
A dummy website
</p>
</div>
</header>
<div class="content">
<br />
<center><h1>Hello There,</h1>
<p>
This is a dummy website created for mobile devices. It is currently not optimised for computers and may look awkward on big screens.
</p>
<p>
I will redesign it in future and at that point it will be optimised for big screen devices like desktops and tablets too.
</p>
<p>
Rest, This webpage doesn't have too much javascript embedded and no backend too. It is just a static webpage. I tried to make it beautiful but I am not a UI designer.
</p>
</center>
</div>
<footer id="footer">
copyright 2020 © Dummy Website
</footer>
<script type="text/javascript" charset="utf-8">
alert('This website is not optimised for desktop devices. Will show correctly only on mobile devices. Also Navbar Doesnt toggle backs up, I will fix that soon.')
document.getElementById('toggle').addEventListener('click',() => {
if(document.getElementById('list').style.display == 'none'){
expand()
}else {
collapse()
}
})
function expand() {
document.getElementById('list').style.display = 'block';
}
function collapse() {
document.getElementById('list').style.display = 'none';
}
</script>
</body>
</html>'