左右滑動選單
#modal-003-slide-left-right-menu
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
</head>
<style type="text/tailwindcss">
.content {
@apply max-w-60 w-full bg-white rounded-xl overflow-hidden shadow-2xl relative;
}
.top-content {
@apply p-4.5 bg-black w-full;
}
.menu-btn {
@apply absolute top-3 left-3 h-3 flex flex-col justify-between z-10 cursor-pointer;
}
.top-line {
@apply w-[15px] h-0.5 bg-white rounded origin-top-left;
}
.mid-line {
@apply w-[15px] h-0.5 bg-white rounded;
}
.bottom-line {
@apply w-[15px] h-0.5 bg-white rounded origin-bottom-left;
}
.bottom-content {
@apply bg-white min-h-96 h-full;
}
.menu {
@apply absolute top-0 left-0 w-4/5 h-full bg-white shadow-lg -translate-x-full;
}
.link-content {
@apply pt-14 space-y-5 px-5;
}
.link {
@apply text-xl text-black hover:text-black/50 transition-all duration-300 block w-max;
}
</style>
<body class="min-h-svh flex items-center justify-center w-full">
<div class=" content">
<div class="top-content"></div>
<div class="menu-btn">
<input type="checkbox" class="peer hidden" />
<div class="top-line"></div>
<div class="mid-line"></div>
<div class=" bottom-line"></div>
</div>
<div class="bottom-content"></div>
<div class="menu">
<div class="link-content">
<a href="" class="link">Home</a>
<a href="" class="link">About</a>
<a href="" class="link">Info</a>
<a href="" class="link">Contact</a>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
let btn = document.querySelector('.menu-btn');
let open = false;
btn.addEventListener('click', function () {
if (open == false) {
let tl = gsap.timeline();
tl.to('.top-line', { backgroundColor: 'black', rotation: '45deg', duration: 0.3, ease: 'linear' })
.to('.mid-line', { opacity: 0, duration: 0.3, ease: 'linear' }, '<')
.to('.bottom-line', { backgroundColor: 'black', rotation: '-45deg', duration: 0.3, ease: 'linear' }, '<')
.to('.menu', { duration: 0.3, x: 0 }, '<');
} else {
let tl = gsap.timeline();
tl.to('.menu', { duration: 0.3, x: '-192px' })
.to('.top-line', { backgroundColor: 'white', rotation: 0, duration: 0.3, ease: 'linear' }, '<')
.to('.mid-line', { opacity: 1, duration: 0.3, ease: 'linear' }, '<')
.to('.bottom-line', { backgroundColor: 'white', rotation: 0, duration: 0.3, ease: 'linear' }, '<');
}
open = !open;
})
});
</script>
</body>
</html>