Flower Menu Nieuw

<!-- Flower Menu · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="flm"><span class="flm__cap" aria-live="polite">Contact</span><div class="flm__ring"><a class="flm__p" href="#" style="--i:0" data-l="Bellen" aria-label="Bellen"><svg viewBox="0 0 24 24"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg></a><a class="flm__p" href="#" style="--i:1" data-l="Mailen" aria-label="Mailen"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></a><a class="flm__p" href="#" style="--i:2" data-l="Route plannen" aria-label="Route plannen"><svg viewBox="0 0 24 24"><path d="M12 21s-6-5.5-6-11a6 6 0 0 1 12 0c0 5.5-6 11-6 11z"/><circle cx="12" cy="10" r="2"/></svg></a><a class="flm__p" href="#" style="--i:3" data-l="Offerte aanvragen" aria-label="Offerte aanvragen"><svg viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6M8 13h8M8 17h5"/></svg></a><a class="flm__p" href="#" style="--i:4" data-l="Afspraak maken" aria-label="Afspraak maken"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg></a><a class="flm__p" href="#" style="--i:5" data-l="WhatsApp" aria-label="WhatsApp"><svg viewBox="0 0 24 24"><path d="M4 20l1.3-4A8 8 0 1 1 8 18.7z"/></svg></a><button class="flm__btn" type="button" aria-expanded="false" aria-label="Menu openen"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></button></div></div>
</div>

/* Flower Menu · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.flm{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Switzer',system-ui,sans-serif}
.flm__cap{position:absolute;left:14px;top:12px;font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.55)}
.flm__ring{--r:76px;position:relative;width:52px;height:52px}
.flm__btn,.flm__p{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center}
.flm__btn{inset:0;z-index:2;background:#0a0a0a;color:#fff;border:0;cursor:pointer;transition:background .25s}
.flm__btn svg{width:22px;height:22px;transition:transform .4s cubic-bezier(.5,1.6,.4,1)}
.flm svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flm.is-open .flm__btn{background:#F5480F}.flm.is-open .flm__btn svg{transform:rotate(135deg)}
.flm__p{left:4px;top:4px;width:44px;height:44px;background:#fff;color:#0a0a0a;border:1px solid rgba(10,10,10,.14);text-decoration:none;opacity:0;pointer-events:none;transform:rotate(calc(var(--i) * 60deg - 90deg)) translateX(0) rotate(calc(90deg - var(--i) * 60deg)) scale(.4);transition:transform .45s cubic-bezier(.5,1.5,.45,1),opacity .25s,background .2s,color .2s;transition-delay:calc(var(--i) * 30ms)}
.flm__p svg{width:18px;height:18px}
.flm.is-open .flm__p{opacity:1;pointer-events:auto;transform:rotate(calc(var(--i) * 60deg - 90deg)) translateX(var(--r)) rotate(calc(90deg - var(--i) * 60deg)) scale(1)}
.flm__p:hover,.flm__p:focus-visible{background:#0a0a0a;color:#fff;outline:none}
.flm__btn:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
@media(max-width:420px){.flm__ring{--r:68px}}
@media(prefers-reduced-motion:reduce){.flm__p,.flm__btn svg{transition:opacity .2s}}

// Flower Menu · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.flm'); if (!w) return;
    var btn = w.querySelector('.flm__btn'), cap = w.querySelector('.flm__cap'), ps = w.querySelectorAll('.flm__p');
    function set(o) { w.classList.toggle('is-open', o); btn.setAttribute('aria-expanded', String(o)); btn.setAttribute('aria-label', o ? 'Menu sluiten' : 'Menu openen'); cap.textContent = o ? 'Kies een actie' : 'Contact'; ps.forEach(function (p) { p.tabIndex = o ? 0 : -1; }); }
    btn.addEventListener('click', function () { set(!w.classList.contains('is-open')); });
    ps.forEach(function (p) {
      p.addEventListener('mouseenter', function () { cap.textContent = p.dataset.l; });
      p.addEventListener('focus', function () { cap.textContent = p.dataset.l; });
      p.addEventListener('mouseleave', function () { cap.textContent = 'Kies een actie'; });
      p.addEventListener('click', function (e) { e.preventDefault(); cap.textContent = p.dataset.l + ' gekozen'; });
    });
    w.addEventListener('keydown', function (e) { if (e.key === 'Escape' && w.classList.contains('is-open')) { set(false); btn.focus(); } });
    set(false);
    setTimeout(function () { set(true); }, 500);
}
init(document.querySelector('.jouw-container'));