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()">☰</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
Post a Comment