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