I made a Toggle menu but my JavaScript does not look right, I need to understand why this way works and what is the right way to do this -


content navbar

<a class="menubtn" onclick="togglebar()">&#9776;</a>  <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>    .overlay {  width: 0%;  background-color: steelblue;  transition: 0.5s;  overflow: hidden;  float: right;  }    .overlay-content {  text-align: center;  margin-top: 50px;  }    .overlay {  padding: 8px;  text-decoration: none;  display: block;  }  .menubtn {  position: absolute;  top: 25px;  right: 30px;  }  </style>        <script>  function togglebar() {      var x = document.getelementbyid('mynav');      if (x.style.width === '') {      	x.style.width = '100%';      } else {      	x.style.width = '';      }  }  </script>

is javascript correct? or how make toggle function correctly?

i not want use jquery or other library.


Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -