門口菜單
#model-005-door-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-xl w-full bg-slate-200 min-h-80 relative overflow-hidden;
}
.header {
@apply flex justify-end relative px-5 py-5 z-10;
}
.logo {
@apply text-amber-500 text-3xl absolute top-5 left-5;
}
.btn {
@apply w-10 h-7 flex flex-col justify-between cursor-pointer;
}
.line {
@apply w-full h-1 rounded-full bg-white;
}
.left-bg {
@apply absolute top-0 -translate-x-full w-[30%] h-full bg-amber-400;
}
.right-bg {
@apply absolute top-0 right-0 translate-x-full w-[30%] h-full bg-amber-400;
}
.menu-content {
@apply absolute top-0 left-0 w-full h-full;
}
.menu {
@apply mx-auto max-w-[40%] flex flex-col justify-center items-center h-full space-y-5 -translate-y-full;
}
.link {
@apply text-amber-400 text-2xl w-fit cursor-pointer;
}
</style>
<body class="min-h-svh flex items-center justify-center w-full">
<div class="content">
<div class="header">
<div class="logo">LOGO</div>
<div class="btn">
<p class="line top"></p>
<p class="line mid"></p>
<p class="line bottom"></p>
</div>
</div>
<div class="left-bg"></div>
<div class="right-bg"></div>
<div class="menu-content">
<div class="menu">
<p class="link">Home</p>
<p class="link">About</p>
<p class="link">Contact</p>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
let btn = document.querySelector('.btn');
let status = false;
let tl = gsap.timeline();
tl.to('.top', { rotate: "45deg", y: 12, duration: 0.3 })
.to('.mid', { opacity: 0, x: "-20", duration: 0.3 }, "<")
.to('.bottom', { rotate: "-45deg", y: -12, duration: 0.3 }, "<")
.to('.logo', { color: "white", duration: 0.3 }, "<")
.to('.left-bg', { x: 0, duration: 0.3 }, "<")
.to('.right-bg', { x: 0, duration: 0.3 }, "<")
.to('.menu', { y: 15, duration: 0.2 })
.to('.menu', { y: 0, duration: 0.05 });
tl.pause();
btn.addEventListener('click', function () {
if (status == false) {
tl.play();
} else {
tl.reverse();
}
status = !status;
});
});
</script>
</body>
</html>