Webflow gooey dropdown menu

What you receive in Webflow

• 26 native elements and 17 classes.
• States: hover.
• 3 Embed elements keep the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="gd">
  <div class="gd-inner">
    <h2 class="gd-title">A menu that melts open</h2>
    <p class="gd-text">Click the button: the items drip out of it and merge back when it closes.</p>
    <div class="gd-menu">
      <svg class="gd-defs" width="0" height="0" aria-hidden="true" focusable="false"><filter id="gd-goo"><feGaussianBlur in="SourceGraphic" stdDeviation="9" result="b"></feGaussianBlur><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10" result="g"></feColorMatrix><feComposite in="SourceGraphic" in2="g" operator="atop"></feComposite></filter></svg>
      <div class="gd-blobs" aria-hidden="true"><span class="gd-blob gd-blob-main"></span><span class="gd-blob"></span><span class="gd-blob"></span><span class="gd-blob"></span><span class="gd-blob"></span></div>
      <button class="gd-toggle" type="button" aria-expanded="true" aria-controls="gd-list">Explore <span class="gd-caret" aria-hidden="true"></span></button>
      <ul class="gd-list" id="gd-list">
        <li class="gd-li"><a class="gd-link" href="#">Product tour</a></li>
        <li class="gd-li"><a class="gd-link" href="#">Pricing</a></li>
        <li class="gd-li"><a class="gd-link" href="#">Customers</a></li>
        <li class="gd-li"><a class="gd-link" href="#">Changelog</a></li>
      </ul>
    </div>
  </div>
</section>
<style>
.gd { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #faf5ff; color: #2e1065; padding: 112px 24px 200px; }
.gd-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.gd-title { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 12px; }
.gd-text { font-size: 17px; line-height: 1.6; color: #6b21a8; margin: 0 0 44px; }
.gd-menu { position: relative; width: 220px; margin: 0 auto; }
.gd-defs { position: absolute; }
.gd-blobs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: url(#gd-goo); pointer-events: none; }
.gd-blob { position: absolute; left: 10px; right: 10px; top: 0; height: 52px; border-radius: 26px; background: #7c3aed; transition: transform 0.55s cubic-bezier(0.5, 1.6, 0.4, 0.8); }
.gd-blob-main { left: 0; right: 0; height: 56px; border-radius: 28px; }
.gd-blob:nth-child(2) { transform: translateY(66px); }
.gd-blob:nth-child(3) { transform: translateY(124px); transition-delay: 0.04s; }
.gd-blob:nth-child(4) { transform: translateY(182px); transition-delay: 0.08s; }
.gd-blob:nth-child(5) { transform: translateY(240px); transition-delay: 0.12s; }
.gd-toggle { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; font-weight: 700; color: #ffffff; background: transparent; border: 0; border-radius: 28px; cursor: pointer; }
.gd-toggle:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
.gd-caret { width: 10px; height: 10px; border-right: 2.5px solid #ffffff; border-bottom: 2.5px solid #ffffff; transform: translateY(-3px) rotate(45deg); transition: transform 0.3s ease; }
.gd-list { position: relative; z-index: 1; list-style: none; margin: 10px 0 0; padding: 0; }
.gd-li { margin: 0; padding: 0; }
.gd-link { display: flex; align-items: center; justify-content: center; height: 52px; margin: 0 10px 6px; border-radius: 26px; color: #ffffff; font-size: 16px; font-weight: 700; text-decoration: none; transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.5, 1.6, 0.4, 0.8), background-color 0.2s ease; }
.gd-link:hover, .gd-link:focus-visible { background: rgba(255, 255, 255, 0.16); }
.gd-js .gd-menu:not(.is-open) .gd-blob:not(.gd-blob-main) { transform: translateY(0); transition-delay: 0s; }
.gd-js .gd-menu:not(.is-open) .gd-link { opacity: 0; transform: translateY(-40px); pointer-events: none; }
.gd-js .gd-menu:not(.is-open) .gd-caret { transform: translateY(-3px) rotate(45deg); }
.gd-menu.is-open .gd-caret { transform: translateY(3px) rotate(225deg); }
@media (prefers-reduced-motion: reduce) { .gd-blob, .gd-link { transition: opacity 0.2s ease; } }
</style>
<script>
(function () {
  var menus = document.querySelectorAll(".gd-menu");
  if (!menus.length) return;
  document.documentElement.classList.add("gd-js");
  menus.forEach(function (menu) {
    var btn = menu.querySelector(".gd-toggle");
    function set(open) { menu.classList.toggle("is-open", open); btn.setAttribute("aria-expanded", open ? "true" : "false"); }
    set(false);
    btn.addEventListener("click", function () { set(!menu.classList.contains("is-open")); });
    document.addEventListener("click", function (e) { if (!menu.contains(e.target)) set(false); });
    document.addEventListener("keydown", function (e) { if (e.key === "Escape") { set(false); btn.focus(); } });
  });
})();
</script>