I would like to open/close a menu with one button, I want to use only Javascript

Question

 function openNav() { document.getElementById("myNav").style.height = "100%"; } function closeNav() { document.getElementById("myNav").style.height = "0%"; }

 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&#9776;</a>

Answer 1

You have to explain it better but I think I understand what you want.

Just use display block.

Something like this :

function openNav() {
var menu = document.getElementById("myNav").style.display;

If (menu == "block") {
menu="none";
}else{
menu="block";
}}

// Open and close div 
<a href="javascript:void(0)" class="closebtn" onclick="openNav()">&#9776;</a>

I'm not sure if the syntax is right because I'm writing this from my phone.

But I think it's works.

Lets me know.

Answer 2

it should be toggle function

 function toggleNav(){ var myNav = document.getElementById("myNav"); if(!myNav) return; myNav.style.display = myNav.style.display.toLowerCase() != 'none'? 'none' : 'block'; }

 <a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">&#9776;</a> <div id="myNav" style="width: 100px; height: 100px; background: #ff0000; display:none;"></div>

Answer 3

<div href="javascript:void(0)" class="closebtn" onclick="toggleNav()">&#9776;</div>

<div id="myNav" class="overlay">
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>

<style>
html, body{ 
margin: 0;
}
.overlay {
height: 0%;
width: 100%;
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
}

.overlay-content {
position: relative;
text-align: center;
margin-top: 50px;
}

.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}

.closebtn{
position: absolute;
float: right;
right: 15px;
top: 10px;
font-size: 30px;
cursor: default;
color: #eee
}
</style>

<script>
function toggleNav(){
    var myNav = document.getElementById("myNav");
    if(!myNav) return;
    myNav.style.display = myNav.style.display.toLowerCase() != 'none'? 'none' : 'block';
}
</script>