function navtoggle(elementRef) {
if (document.getElementById('nav').className = 'closed') {
document.getElementById('nav').className = 'open'
} else if (document.getElementById('nav').className = 'open') {
document.getElementById('nav').className = 'closed'
};
}
.closed {
display: none;
}
.open {
display: block;
}
#navget {
width: 100px;
height: 100px;
box-shadow: 0px 0px 15px black;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>HTML Library</title>
</head>
<body>
<div id="nav" class="closed">
<ul>
<li><a href="index.html"><h1>HOME</h1></a>
</li>
</ul>
</div>
<button onclick="JavaScript: navtoggle(this);" id="navget">NAV</button>
</body>
</html>
Here is the Html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>HTML Library</title>
</head>
<body>
<div id="nav" class="closed">
<ul>
<li><a href="index.html"><h1>HOME</h1></a></li>
</ul>
</div>
<button onclick="JavaScript: navtoggle(this);" id="navget">NAV</button>
</body>
</html>
The JS:
function navtoggle(elementRef){
if (document.getElementById('nav').className = 'closed')
{document.getElementById('nav').className = 'open'}
else if (document.getElementById('nav').className = 'open')
{document.getElementById('nav').className = 'closed'};
}
And the CSS:
.closed {
display: none;
}
.open {
display: block;
}
#navget {
width: 100px; height: 100px;
}
I know that it would be easier to just use a checkbox, and I do know how to do that. However, I want it to just be a button so that I can make it look better and such. I'm rather new to JS so please do not be too harsh for the dumb question. Thank you.
Aucun commentaire:
Enregistrer un commentaire