My navigation menu is positioned off-screen to the right, and I am able to hide it by adjusting the style.marginLeft property. However, when I try to reveal it by setting the property again, nothing happens.
function navroll(state) {
if(state == true) {
document.getElementById("navbar").style.marginLeft = window.innerWidth + 5 +"px";
document.getElementById("btn-unhide").style.display = "block";
} else {
document.getElementById("navbar").style.marginLeft = window.innerWidth - document.getElementById("navbar").offsetWidth - 5 + "px";
//document.getElementById("btn-unhide").style.display = "none";
}
}
function keepscale() {
if(document.getElementById("btn-unhide").style.display == "block") {
document.getElementById("navbar").style.marginLeft = window.innerWidth - document.getElementById("navbar").offsetWidth - 5 + "px";
}
}#btn-unhide {
position: fixed;
display: none;
left: 90%;
transition: 3s;
}
#navbar .inner {
position: absolute;
}
#navbar {
display: block;
z-index: 1;
overflow: hidden;
background-color: transparent;
position: fixed;
left: 60%;
}
#navbar {
transition: margin-left 3s;
}
.nav-button {
color: white;
border-radius: 30px;
background-color: #f25646;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
float: right;
border-block-start-color: black;
padding: 10px 16px;
margin-left: 3px;
margin-bottom: 3px;
outline: none;
}
.nav-button:hover {
background-color: #a7382c;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Revista CNAIC</title>
<link href="css/navbar.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body onresize="keepscale()">
<div id="navwrapper">
<div id="btn-unhide">
<button onclick="navroll(false)"> unhide </button>
</div>
<div id="navbar">
<div class="btn-sign">
<button class="nav-button">Proiecte si Activitati Extrascolare
</button>
<button class="nav-button">Rezultate Academice
</button>
<button class="nav-button">Interviul Saptamanii
</button>
</div>
<div id="btn-hide">
<button onclick="navroll(true)"> hide </button>
</div>
</div>
</div>
<script src="js/index.js"></script>
<script src="js/navbar.js"></script>
</body>
</html>I've experimented with different methods to reveal it, such as using style.transform = " translate(-" window.innerWidth - myelement.offsetWidth - 5 + "px);" but have had no success. I'm unsure of what else to try.