<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 button = document.getElementById('button')
const body = document.getElementsByTagName("body")[0];
const toogleMenu = () => {
document
.getElementsByClassName("menu")[0]
.classList.toggle("menu--active")
console.log('toogleMenu')
}
const closeMenu = () => {
document
.getElementsByClassName("menu")[0]
.classList.remove("menu--active")
console.log('closeMenu')
};
button.addEventListener("click",toogleMenu)
body.addEventListener("click",closeMenu);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.