As I attempted to implement the functionality of this left menu bar, I encountered a roadblock. The click event on the menu button seems to work fine initially - the left bar appears with the first click and closes as expected with the second click. However, when I attempt to open it again with a third click, the bar fails to appear. I suspect that this issue arises because there is no loop in place, causing it to remain stuck at the last listener. I considered implementing a switch case, but my limited knowledge of JavaScript hinders me. As someone new to coding in JavaScript, any guidance or suggestions would be greatly appreciated.
document.getElementById('menu-ic').addEventListener('click', function(evt) {
document.getElementById('menu-hidden').style.left = '0';
document.getElementById('l1').style.cssText = 'background-color: #000000;width:0px;';
document.getElementById('l2').style.cssText = 'background-color: #000000;width:26px;';
document.getElementById('l3').style.cssText = 'background-color: #000000;width:0px;';
if (document.getElementById('menu-hidden').style.left = '0') {
document.getElementById('menu-ic').addEventListener('click', function(evt) {
document.getElementById('menu-hidden').style.left = '-300px';
document.getElementById('l1').style.cssText = 'width:20px;';
document.getElementById('l2').style.cssText = 'width:24px;';
document.getElementById('l3').style.cssText = 'width:22px;';
});
}
});#menu-hidden {
position: absolute;
width: 300px;
height: 1200px;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
opacity: 0.98;
top: -120px;
left: -300px;
z-index: 550;
transition: all 1s ease; }
#menu-hidden ul {
position: absolute;
top: 15%; }
#menu-hidden ul li {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 120px;
float: right;
list-style: none;
text-align: right; }
#menu-hidden ul li a {
font-family: sans-serif;
color: #2c2c2c;
font-size: 18px;
text-transform: uppercase; }
#menu-hidden ul li a:hover {
color: #d6222f;
transition: all 0.5s ease; }
button:focus {
outline: none;
}
nav {
position: relative;
display: inline-block;
float: left; }
#menu-ic {
background: none;
border: none;
position: absolute;
cursor: pointer;
width: 30px;
height: 30px;
top: 30px;
left: 30px;
z-index: 600; }
#menu-ic hr {
height: 2px;
background-color: #000;
position: absolute;
border: none;
transition: all 1s ease;
z-index: 500;
}
#l1 {
width: 20px;
top: 0; }
#l2 {
width: 24px;
top: 8px; }
#l3 {
width: 22px;
top: 16px; }<div id="menu-hidden" >
<ul>
<li><a href="#" class="anchor-scroll active">Retail Registration</a></li>
<li><a href="#" class="anchor-scroll">Wholesale Registration</a></li>
<li><a href="#" class="anchor-scroll">Mens Clothing</a></li>
<li><a href="#" class="anchor-scroll">Women</a></li>
<li><a href="#" class="anchor-scroll">Private Label</a></li>
<li><a href="#" class="anchor-scroll">Lookbook</a></li>
<li><a href="#" class="anchor-scroll">Catalogue</a></li>
<li><a href="#" class="anchor-scroll">Contact Us</a></li>
</ul>
</div>
<nav>
<button id="menu-ic">
<hr id="l1">
<hr id="l2">
<hr id="l3">
</button>
</nav>