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>
window.addEventListener("DOMContentLoaded", (event) => {
 $(".menu-pill").each(function (index) {
   $(this).css("z-index", $(".menu-pill").length - index);
 });  $(".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"
     }
   );
   $(".menu-pill").toggleClass("is-closed");
   Flip.from(menuState, {
     duration: 1,
     absolute: true,
     ease: "power4.inOut"
   });
 });
});
</script>

03

Add the Component

Simply copy and paste the "Sliding Menu" component into your project, and edit the component properties to your liking.

Copied!