Setup Guide

01

Add the Head Code

Copy the code below and paste it into the “Inside <head> tag” code section in your page or site settings.

Copy Code to Clipboard

<style>
.is-closed .menu-p {opacity: 0;}
.menu-pill .menu-p.is-menu-text{
opacity: 0
} .menu-pill .menu-p.is-close-text{
opacity: 1
} .menu-pill.is-closed .menu-p.is-menu-text{
opacity: 1
} .menu-pill.is-closed .menu-p.is-close-text{
opacity: 0
} .menu_component {
opacity: 0
} .menu-pill.is-closed {
pointer-events: none;
} .menu-pill.is-menu.is-closed {
pointer-events: auto;
}
</style>

02

Add the Body Code

Copy the code below and paste it into the “Before </body> tag” code section in your page or site settings.

Copy Code to Clipboard

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/Flip.min.js"></script>
<script>
function convertRemToPixels(rem) {
 return parseFloat(getComputedStyle(document.documentElement).fontSize) / rem;
}window.addEventListener("DOMContentLoaded", (event) => {
 $(".menu-pill").each(function (index) {
   $(this).css("z-index", $(".menu-pill").length - index);
   $(this).addClass("is-closed");
 });  let menuButtonWidth = convertRemToPixels($(".is-menu").outerWidth());
 let remAmount = convertRemToPixels(5);
 let adjustment = menuButtonWidth - remAmount;  $(".menu-pill")
   .not(".is-menu")
   .each(function (index) {
     gsap.set($(this).not(".is-menu"), { width: "5rem" });
     let negativeMargin =
       $(this).position().left * -1 +
       ((index + 2) * convertRemToPixels(1) + adjustment);
     gsap.set($(this), { x: negativeMargin });
   });  $(".menu_component").css("opacity", "100");  let pillHeight = $(".menu-pill").eq(1).outerHeight();
 $(".menu_component").css("height", `${pillHeight}px`);  $(".is-menu").on("click", function () {
   let menuState = Flip.getState(
     ".menu-pill, .menu-p, .is-menu-text, .is-close-text",
     {
       props: "opacity,margin,padding,width,translate"
     }
   );
   $(".menu-pill").toggleClass("is-closed");    let nonMenu = $(".menu-pill").not(".is-menu");
   nonMenu.each(function (index) {
     let editableMenus = $(this).not(".is-menu");
     let negativeMove =
       editableMenus.position().left * -1 +
       ((index + 2) * convertRemToPixels(1) + adjustment);
     if (editableMenus.hasClass("is-closed")) {
       gsap.set(editableMenus, { width: "5rem" });
       gsap.set(editableMenus, { x: negativeMove });
     } else {
       gsap.set(editableMenus, { width: "auto", x: 0 });
     }
   });    Flip.from(menuState, {
     duration: 1,
     absolute: false,
     ease: "power4.inOut"
   });
 });
});
</script>

03

Add the Component

Simply copy and paste the Menu Component into your project, add as many Menu Link components as you need, and edit the component properties to your liking.

Copied!