Menu button with "toggle" event

Question

I was trying to create a simple menu, but found that toggle function is obsolete.

What would be the current alternative to create a toggle event, since I only found old answers?

When you click a.menuicon, the #menu ul.navigation goes down and becomes visible. When you click again, the menu goes up and disappears. Basically, a responsive menu.

a.menubar { display: none; }
    
@media screen and (max-width: 768px) {
a.menubar { display: block; }
#menu ul.navigation { display: none; }
}

<div id="menu">
    <a class="menuicon" href='#'>Menu</a>

<ul class="navigation">
  <li><a href='#'>Home</a></li>
  <li><a href='#'>Link 1</a>
  <li><a href='#'>Link 2</a>
</ul>
</div>

Answer 1

There is a way, but it is not indicated because it is not semantic to make a menu... but you can use the tag <details>

Law more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Take the example

a {display:block}

<details>
    <summary>MENU</summary>
    <a href="https://google.com">Google</a>
    <a href="https://facebook.com">FaceBook</a>
</details>

Answer 2

You can implement the transitions in the element using :active to detect the click.

Follows a north.

#menu:active {
  transition-property: property;
  transition-duration: duration;
  transition-timing-function: timing-function;
  transition-delay: delay

  /* ou pode por tudo em uma linha */
  transition: property duration timing-function delay;
}

Answer 3

You can do it without using toggle, classList or classname. Just create two CSS shots using an attribute data-ativo, one with display: none so that the menu already click hidden when it is equal to false:

ul.navigation[data-ativo='false']{
   display: none;
}

And another to show the menu when the data-ativo for true:

ul.navigation[data-ativo='true']{
   display: block;
}

When you click on the "Menu" link and the menu is closed, it will change the attribute data-ativo for true, and if it is open, it will change to false, and the CSS rules will display or display the menu:

document.addEventListener("DOMContentLoaded", function(){
   document.querySelector(".menuicon").addEventListener("click", function(e){
      e.preventDefault();
      var navi = document.querySelector(".navigation");
      var navi_ativo = navi.dataset.ativo;
      navi.setAttribute("data-ativo", navi_ativo == "true" ? "false" : "true");
   });
});

ul.navigation[data-ativo='false']{
   display: none;
}

ul.navigation[data-ativo='true']{
   display: block;
}

<div id="menu">
   <a class="menuicon" href='#'>Menu</a>

   <ul class="navigation" data-ativo="false">
     <li><a href='#'>Home</a></li>
     <li><a href='#'>Link 1</a>
     <li><a href='#'>Link 2</a>
   </ul>
</div>

---

There is another simpler approach. When the element is hidden with display: none, its height is equal to 0, with this you can switch between display: none and display: block checking whether the height is equal to 0:

document.addEventListener("DOMContentLoaded", function(){
   document.querySelector(".menuicon").addEventListener("click", function(e){
      e.preventDefault();
      var navi = document.querySelector(".navigation");
      var navi_height = navi.clientHeight || navi.offsetHeight;
      navi.style.display = navi_height ? "none" : "block";
   });
});

.navigation{
   display: none;
}

<div id="menu">
   <a class="menuicon" href='#'>Menu</a>

   <ul class="navigation">
     <li><a href='#'>Home</a></li>
     <li><a href='#'>Link 1</a>
     <li><a href='#'>Link 2</a>
   </ul>
</div>