I've created a menu that allows you to display the list when clicking on the menu icon. I wonder whether this can be improved somehow - can anyone help improve this?
Also, initially I created it with the event passed into the script to prevent it from scrolling to the top when clicking on the link. I then changed it to an ES6 function - does it not need the event passed in and calling e.preventDefault()
?
Thank you. The code is as follows:
const cont = document.querySelector('.cont');
const hamburger = document.querySelector('#hamburger');
// const toggleMenu = (e) => {
// e.preventDefault();
// cont.classList.toggle('open');
// }
const toggleDisplay = () => cont.classList.toggle('open');
hamburger.addEventListener('click', toggleDisplay);
.cont {
position: relative;
}
a {
font-size: 3em;
}
a:hover {
cursor: pointer;
}
a::after {
content: '\002b';
}
.open a::after {
content: '\00d7';
color: red;
}
.open ul {
display: flex;
}
ul {
all: unset;
display: none;
position: absolute;
background: #0ff;
padding: .5em;
min-width: 100px;
top: 100%;
left: 0;
flex-direction: column;
text-align: center;
}
li {
all: unset;
width: 100%;
}
li:not(:first-child) {
margin-top: .5em;
padding-top: .5em;
border-top: 1px solid #ccc;
}
<div class='cont'>
<a id='hamburger'></a>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>