Ease Reverse Clip Menu New

<!-- Ease Reverse Clip Menu · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="erm"><div class="erm__bar"><span class="erm__logo">Bouwbedrijf Kruit</span><button class="erm__btn" aria-expanded="false">Menu</button></div>
<div class="erm__hero"><span class="erm__kick">Aannemer · Zoetermeer</span><p>Verbouwen zonder gedoe, sinds 1987.</p></div>
<div class="erm__panel" aria-hidden="true"><div class="erm__top"><span class="erm__logo">Bouwbedrijf Kruit</span><button class="erm__close">Sluit</button></div>
<nav class="erm__nav"><a class="erm__line" href="#" style="--i:0"><span>Projecten</span></a><a class="erm__line" href="#" style="--i:1"><span>Werkwijze</span></a><a class="erm__line" href="#" style="--i:2"><span>Over ons</span></a><a class="erm__line" href="#" style="--i:3"><span>Contact</span></a></nav>
<span class="erm__foot">079 123 4567 · info@voorbeeld.nl</span></div></div>
</div>

/* Ease Reverse Clip Menu · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.erm{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;overflow:hidden;container-type:size;--erm-n:4}
.erm__bar,.erm__top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px}
.erm__logo{font-size:13px;font-weight:700;color:inherit}
.erm__bar{color:#0a0a0a}
.erm__btn,.erm__close{border:1px solid currentColor;background:none;color:inherit;border-radius:999px;padding:5px 13px;font:600 11px 'Switzer',system-ui,sans-serif;cursor:pointer}
.erm__hero{position:absolute;left:14px;right:14px;bottom:16px;color:#0a0a0a}
.erm__kick{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#F5480F}
.erm__hero p{margin:6px 0 0;font:800 clamp(15px,5cqw,22px)/1.25 'Boldonse','Switzer',system-ui,sans-serif;font-synthesis:none;max-width:16em}
.erm__panel{position:absolute;inset:0;background:#0a0a0a;color:#fff;display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(.7,0,.84,0) .22s;visibility:hidden}
.erm.is-open .erm__panel{clip-path:inset(0 0 0 0);transition:clip-path .7s cubic-bezier(.16,1,.3,1);visibility:visible}
.erm__panel{transition-property:clip-path,visibility}
.erm__nav{display:flex;flex-direction:column;padding:2px 14px;gap:min(1.6cqh,8px)}
.erm__line{display:block;overflow:hidden;text-decoration:none;color:#fff;clip-path:inset(0 0 0 0)}
.erm__line span{display:inline-block;font:800 min(9.5cqh,7.5cqw)/1.3 'Boldonse','Switzer',system-ui,sans-serif;font-synthesis:none;transform:translateY(105%);transition:transform .45s cubic-bezier(.7,0,.84,0);transition-delay:calc((var(--erm-n) - 1 - var(--i)) * 45ms)}
.erm.is-open .erm__line span{transform:none;transition:transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(220ms + var(--i) * 70ms)}
.erm__line:hover span,.erm__line:focus-visible span{color:#F5480F}
.erm__foot{margin-top:auto;padding:10px 14px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;color:rgba(255,255,255,.6)}
@media(prefers-reduced-motion:reduce){.erm__panel,.erm.is-open .erm__panel,.erm__line span,.erm.is-open .erm__line span{transition:none}}

// Ease Reverse Clip Menu · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.erm')||root;var btn=root.querySelector('.erm__btn'),cl=root.querySelector('.erm__close'),p=root.querySelector('.erm__panel');
function set(o){root.classList.toggle('is-open',o);btn.setAttribute('aria-expanded',o);p.setAttribute('aria-hidden',!o);}
btn.addEventListener('click',function(){set(true);});cl.addEventListener('click',function(){set(false);});root.querySelectorAll('.erm__line').forEach(function(a){a.addEventListener('click',function(e){e.preventDefault();set(false);});});
}
init(document.querySelector('.jouw-container'));