I am currently working on a HTML menu that includes a button to open it and an unordered list :
<nav class="menu">
<button>
<h1>Menu</h1>
</button>
<ul class="mylist">
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
</nav>
My goal is to utilize JavaScript to change the margin of the ul class upon clicking: CSS:
.mylist{
margin: 300em;
}
.mylist.shown{
margin: 2em;
}
However, the current script is not functioning as expected. Can someone please help me identify the problem? Thank you.
let hiddenList= document.querySelector('.mylist');
let button= document.querySelector('button');
hiddenList.style.margin= '300em';
button.addEventListener('click', function(){
hiddenList.classList.toggle('shown')
})