<head>
  <button id="button" > menu</button>
  <nav id="menu" class="menu">
    <ul>
      <li><a href="#" data-color="red"> Zmien kolor na czerwony</a></li>
      <li><a href="#" data-color="green"> Zmien kolor na zielony</a></li>
      <li><a href="#"  data-color="blue"> Zmien kolor na niebieski</a></li>
    </ul>
  </nav>
</head>
<section>
  <h1>Test</h1>
  <p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker
</section>
.menu{
  transform:scale(0);
  transition: transform 300ms,max-height 300ms;
    height:auto;
  max-height:0
}
.menu--active{
  transform:scale(1);
  max-height:100px
}
const menu = document.getElementById('button')
const body = document.getElementsByTagName("body")[0];
const toogleMenu = () => {
  document
   .getElementsByClassName("menu")[0]
   .classList.toggle("menu--active")
  event.stopPropagation()
  console.log('toogleMenu')
}
const closeMenu = () => {
  document
   .getElementsByClassName("menu")[0]
   .classList.remove("menu--active")
  console.log('closeMenu')
};
menu.addEventListener("click",toogleMenu)
body.addEventListener("click",closeMenu);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.