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.
<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.
<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.