# Mega-Menu > A full-width mega menu with staggered panel motion — enterprise navigation that stays clear under complexity. **Definition:** Mega-Menu is a navigation UI animation from collections.html. It is built with HTML, CSS, JavaScript, and GSAP, ships with a live preview, and is free to copy into personal and commercial projects. ## Facts - Category: Navigation - Stack: HTML, CSS, JavaScript, and GSAP - Added: 2026-08-01 - Canonical page: https://html.bosconvertpro.com/collection/mega-menu - Full-page preview: https://html.bosconvertpro.com/collection/mega-menu/full - Live demo: https://html.bosconvertpro.com/demos/mega-menu/index.html - Markdown mirror: https://html.bosconvertpro.com/collection/mega-menu/index.md - License: https://html.bosconvertpro.com/terms ## How to use 1. Open https://html.bosconvertpro.com/collection/mega-menu/full to preview the animation in full screen. 2. Copy index.html, styles.css, and script.js from the code tabs on https://html.bosconvertpro.com/collection/mega-menu. 3. Paste the files into your project and adjust timing, easing, and content as needed. ## FAQ ### What is Mega-Menu? Mega-Menu is a navigation UI animation from collections.html. A full-width mega menu with staggered panel motion — enterprise navigation that stays clear under complexity. ### What is Mega-Menu built with? Mega-Menu is built with HTML, CSS, JavaScript, and GSAP. The source for every file is shown on the animation page and can be copied straight into your project. ### How do I use Mega-Menu in my project? Open the animation page (https://html.bosconvertpro.com/collection/mega-menu), preview it live, then copy index.html, styles.css, and script.js from the code tabs. Paste the files into your project and adjust timing, easing, and content as needed. A standalone demo runs at https://html.bosconvertpro.com/demos/mega-menu/index.html. ### Is Mega-Menu free to use? Yes. The Mega-Menu demo code may be used in personal and commercial projects. You may not resell or redistribute the collection itself as a competing template pack. Full terms: https://html.bosconvertpro.com/terms. ## Source — index.html ````html ABBOS — Mega Menu
```` ## Source — styles.css ````css @font-face { font-family: "Haffer VF"; src: url("https://cdn.prod.website-files.com/68a5787bba0829184628bd51/68a5df2de5b7c113032b4047_HafferStandardUprights-VF.ttf") format("truetype"); font-weight: 100 1000; font-style: normal; font-display: swap; } @font-face { font-family: "Haffer Mono"; src: url("https://cdn.prod.website-files.com/68a5787bba0829184628bd51/68a5e163329ff81e2107c078_HafferMonoRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Haffer Mono"; src: url("https://cdn.prod.website-files.com/68a5787bba0829184628bd51/68a5e16300ff1c3e56d220c5_HafferMonoMedium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Haffer XH"; src: url("https://cdn.prod.website-files.com/68a5787bba0829184628bd51/68a5e1630039e3499e62b7be_HafferXHRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Neutrals */ --color-neutral-100: #ffffff; --color-neutral-200: #f4f4f4; --color-neutral-300: #eaeaea; --color-neutral-400: #e1e1e1; --color-neutral-450: #d8d8d8; --color-neutral-475: #b8b8b8; --color-neutral-500: #817f7f; --color-neutral-525: #4f4c4c; --color-neutral-550: #393636; --color-neutral-600: #312e2e; --color-neutral-700: #2a2727; --color-neutral-800: #201d1d; --color-neutral-900: #151313; --color-neutral-950: #000000; /* Brand */ --color-electric: #a1ff62; --color-purple: #6840ff; --color-coral: #f84131; /* Aliases */ --color-light: var(--color-neutral-200); --color-dark: var(--color-neutral-800); --color-white: var(--color-neutral-100); --color-black: var(--color-neutral-900); /* Metrics */ --stroke-weight: 1px; --btn-height: 2.5em; --nav-bar-height: 4.625em; --nav-bar-max-width-small: 38em; /* closed ≈ 608px @ 16px */ --gap-xxs: 0.5em; --gap-xs: 0.75em; --gap-s: 1em; --gap-sm: 1.25em; --gap-m: 1.5em; --gap-l: 1.875em; --gap-xl: 2em; --gap-xxl: 2.5em; --container-padding: 1.875em; /* Type families */ --font-sans: "Haffer VF", "Inter", Arial, sans-serif; --font-mono: "Haffer Mono", ui-monospace, monospace; --font-display: "Haffer XH", "Haffer VF", Arial, sans-serif; --wght-body: 460; --wght-button: 500; --wght-big: 430; --wght-medium: 550; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { Shell forces 16px so closed bar / type match visual scale users preferred. */ font-size: 16px; } html, body { height: 100%; } body { font-family: var(--font-sans); font-size: 16px; font-weight: 400; font-variation-settings: "wght" var(--wght-body); letter-spacing: -0.01em; line-height: 1.45; color: var(--color-neutral-800); background-color: var(--color-neutral-200); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; font-variation-settings: inherit; color: inherit; border: 0; background: none; cursor: pointer; } ul { list-style: none; } img { display: block; max-width: 100%; } /* ---------- Stage ---------- */ .stage { min-height: 100%; min-height: 100dvh; display: flex; justify-content: center; align-items: flex-start; padding: 1.25em var(--gap-l); background: var(--color-neutral-200); } /* ---------- Nav shell ---------- CLOSED: 38em | OPEN: full stage width */ .nav { position: relative; z-index: 100; pointer-events: auto; width: 100%; display: flex; justify-content: center; } .nav__shell { position: relative; width: var(--nav-bar-max-width-small); max-width: 100%; color: var(--color-neutral-200); /* Soft corners (not pill) — closed ≈ 0.5em / 8px via GSAP */ border-radius: 0.5em; overflow: hidden; will-change: width, max-width, border-radius; font-size: 16px; /* em base for all nav metrics */ font-family: var(--font-sans); font-variation-settings: "wght" var(--wght-body); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08); } /* .nav-bar__bg */ .nav__shell::before { content: ""; position: absolute; inset: 0; background-color: var(--color-neutral-800); /* #201d1d */ border-radius: inherit; pointer-events: none; z-index: 0; } /* ---------- Top — .nav-bar__top ---------- */ .nav__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; height: 3.375em; padding: 0.4375em; } /* .nav-bar__menu */ .nav__menu { height: 2.5em; margin-right: auto; display: flex; align-items: center; z-index: 2; flex-shrink: 0; } /* .nav-menu */ .nav__menu-btn { display: flex; align-items: center; height: 100%; padding-left: 0.625em; padding-right: 1em; gap: 0.625em; border-radius: 0.125em; color: var(--color-neutral-200); cursor: pointer; transition: background 0.2s ease; } .nav__menu-btn:hover { background: rgba(255, 255, 255, 0.06); } /* .nav-menu__hamburger — 1.375em × 0.4375em */ .nav__hamburger { width: 1.375em; height: 0.4375em; display: flex; flex-flow: column; justify-content: center; align-items: center; position: relative; flex-shrink: 0; margin-left: -0.25em; } /* .nav-menu__hamburger-bar */ .nav__hamburger-bar { width: 100%; height: var(--stroke-weight); background-color: currentColor; position: absolute; left: 0; border-radius: 0; will-change: transform; } .nav__hamburger-bar:nth-child(1) { top: 0; } .nav__hamburger-bar:nth-child(2) { bottom: 0; top: auto; } /* .nav-menu__label — 1.125em, wght 500, tracking -.02em */ .nav__menu-label { font-size: 1.125em; font-weight: 500; font-variation-settings: "wght" var(--wght-button); letter-spacing: -0.02em; line-height: 1; margin-bottom: 0.0625em; color: var(--color-neutral-200); } /* .nav-bar__logo — absolute center, height 2.5em */ .nav__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 2.5em; display: flex; align-items: center; justify-content: center; padding-left: 0.5em; padding-right: 0.5em; border-radius: 0.5em; z-index: 1; } /* Wordmark approx of .nav-logo__wordmark-svg (5.5em wide) */ .nav__logo-text { font-family: var(--font-display); font-size: 1.375em; font-weight: 400; font-variation-settings: "wght" 600; letter-spacing: -0.06em; line-height: 1; color: var(--color-neutral-200); text-transform: uppercase; white-space: nowrap; } /* height: 2.5em padding: 0 1.125em .0625em border-radius: .125em (default) label: 1.125em / wght 500 / tracking -.02em Login: data-shape="round" + theme neutral-525 Join: default radius + theme electric */ .nav__buttons { height: 2.5em; display: flex; align-items: stretch; margin-left: auto; z-index: 2; flex-shrink: 0; /* slight separation between Login / Join pills */ gap: 0.25em; } .nav__btn { --r: 20deg; height: var(--btn-height); display: flex; justify-content: center; align-items: center; padding: 0 1.125em 0.0625em; white-space: nowrap; position: relative; overflow: hidden; cursor: pointer; border-radius: 0.125em; color: var(--color-neutral-800); transition: color 0.2s ease; } /* Login — round pill + light type on dark gray */ .nav__btn[data-shape="round"], .nav__btn--login { border-radius: 3em; color: var(--color-neutral-200); } .nav__btn--join { border-radius: 0.125em; color: var(--color-neutral-800); } /* Background layer — .button-bg */ .nav__btn .button-bg { z-index: 0; pointer-events: none; position: absolute; inset: 0; border-radius: inherit; transition: background-color 0.25s ease; } /* Theme: neutral-525 (Login) */ .nav__btn--login .button-bg, .nav__btn .button-bg[data-theme="neutral-525"] { background-color: var(--color-neutral-525); } .nav__btn--login:hover .button-bg { background-color: var(--color-neutral-550); } /* Theme: electric (Join) */ .nav__btn--join .button-bg, .nav__btn .button-bg[data-theme="electric"] { background-color: var(--color-electric); } .nav__btn--join:hover .button-bg { filter: brightness(1.05); } /* Dual-label stack for rotate flip */ .button-label__wrap { z-index: 1; place-items: center; display: grid; position: relative; } .button-label { font-weight: 500; font-variation-settings: "wght" var(--wght-button); letter-spacing: -0.02em; font-size: 1.125em; line-height: 1; display: flex; align-items: center; justify-content: center; position: relative; /* Arc origin far below — barrel flip */ transform-origin: 50% var(--y, 1100%); will-change: transform; grid-area: 1 / 1; } .button-label:not(:nth-of-type(1)) { position: absolute; } .button-label:nth-of-type(1) { transform: rotate(calc(var(--r) * 0)); } .button-label:nth-of-type(2) { transform: rotate(calc(var(--r) * -1)); } /* Divider — .nav-bar__line */ .nav__line { position: absolute; left: 0.5em; right: 0.5em; bottom: 0; height: var(--stroke-weight); background: var(--color-neutral-600); opacity: 0; pointer-events: none; z-index: 3; } /* ---------- Bottom mega — .nav-bar__bottom ---------- */ .nav__bottom { display: grid; grid-template-rows: 0fr; width: 100%; position: relative; overflow: hidden; will-change: grid-template-rows; } .nav__bottom-overflow { min-height: 0; overflow: hidden; display: flex; flex-flow: column; align-items: center; position: relative; } .nav__bottom-inner { width: 100%; padding: 0 1.5em 0; opacity: 0; display: flex; flex-flow: column; position: relative; } .nav__bottom-row { display: flex; width: 100%; gap: 1.5em; } /* Columns — .nav-bar__bottom-col */ .nav__col { display: flex; flex-flow: column; width: 100%; gap: 1.375em; padding: 2.5em; opacity: 0; transform: translateY(1.25em); will-change: transform, opacity; } .nav__col--products { background: var(--color-neutral-700); border-radius: 1em; } .nav__col--explore { padding-left: 0.5em; padding-right: 0.5em; } .nav__col--ad { padding: 0; background: var(--color-neutral-700); border-radius: 1em; overflow: hidden; position: relative; } .eyebrow { font-family: var(--font-mono); font-size: 0.6875em; /* 11px @ 16px */ font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; line-height: 1; color: var(--color-neutral-200); opacity: 1; display: block; } .nav__tag-row { opacity: 1; display: flex; } /* Big links — premium stationary hover (no x/y shift) */ .nav__ul-big { list-style: none; } .nav__big-a { --link-ease: cubic-bezier(0.22, 1, 0.36, 1); --link-ease-out: cubic-bezier(0.4, 0, 0.2, 1); --link-duration: 0.55s; display: flex; align-items: center; width: 100%; padding-top: 1.0625em; padding-bottom: 1.125em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-neutral-100); opacity: 1; transition: color var(--link-duration) var(--link-ease), border-color var(--link-duration) var(--link-ease); } .nav__ul-big li:last-child .nav__big-a { border-bottom-color: rgba(255, 255, 255, 0.1); } .nav__col--explore .nav__ul-big li:last-child .nav__big-a { border-bottom: 0; } @media (hover: hover) and (pointer: fine) { .nav__big-a:hover { color: var(--color-electric); border-bottom-color: rgba(161, 255, 98, 0.18); } } .nav__big-span { font-size: 1.5em; font-weight: 400; font-variation-settings: "wght" var(--wght-big); line-height: 1; letter-spacing: -0.02em; display: inline-block; position: relative; color: inherit; padding-bottom: 0.12em; transition: font-variation-settings var(--link-duration, 0.55s) var(--link-ease, cubic-bezier(0.22, 1, 0.36, 1)), letter-spacing var(--link-duration, 0.55s) var(--link-ease, cubic-bezier(0.22, 1, 0.36, 1)); } @media (hover: hover) and (pointer: fine) { .nav__big-a:hover .nav__big-span { font-variation-settings: "wght" 480; letter-spacing: -0.015em; } } /* Underline: draw L→R, exit →R — no layout shift */ .nav__big-span::after { content: ""; position: absolute; left: 0; width: 100%; bottom: 0; height: 1.5px; background: currentColor; border-radius: 1px; transform: scaleX(0); transform-origin: right center; transition: transform var(--link-duration, 0.55s) var(--link-ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 0.35s ease; opacity: 0.95; pointer-events: none; will-change: transform; } @media (hover: hover) and (pointer: fine) { .nav__big-a:hover .nav__big-span::after { transform: scaleX(1); transform-origin: left center; } } .nav__big-number { color: var(--color-neutral-450); margin-top: -0.75em; margin-left: 0.25em; font-size: 0.75em; line-height: 1; display: inline-block; position: relative; top: -0.35em; font-variation-settings: "wght" var(--wght-body); opacity: 1; transition: color var(--link-duration, 0.55s) var(--link-ease, cubic-bezier(0.22, 1, 0.36, 1)); } @media (hover: hover) and (pointer: fine) { .nav__big-a:hover .nav__big-number { color: color-mix(in srgb, var(--color-electric) 70%, var(--color-neutral-200)); } } .nav__a-tag { padding-top: 0.25em; padding-left: 0.625em; display: inline-flex; transition: opacity 0.4s var(--link-ease, cubic-bezier(0.22, 1, 0.36, 1)); } @media (hover: hover) and (pointer: fine) { .nav__big-a:hover .nav__a-tag { opacity: 1; } } .nav__a-tag.is--small { padding-top: 0.125em; font-size: 0.8em; } .tag { display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--color-purple); color: var(--color-neutral-100); font-family: var(--font-mono); font-size: 0.5625em; /* ~9px — mono tag scale */ font-weight: 400; letter-spacing: 0; text-transform: uppercase; padding: 0.25em 0.375em 0.1875em; border-radius: 0.125em; line-height: 1.1; } .tag.is--muted { background: var(--color-neutral-550); color: rgba(255, 255, 255, 0.85); } /* Small links footer — refined stationary hover */ .nav__small-ul { gap: 2.5em; margin-top: auto; list-style: none; display: flex; flex-wrap: wrap; padding-top: 1em; opacity: 1; } .nav__small-a { --link-ease: cubic-bezier(0.22, 1, 0.36, 1); --link-duration: 0.5s; display: flex; align-items: center; width: 100%; padding-top: 0.3125em; padding-bottom: 0.25em; color: rgba(255, 255, 255, 0.72); opacity: 1; transition: color var(--link-duration) var(--link-ease); } @media (hover: hover) and (pointer: fine) { .nav__small-a:hover { color: var(--color-neutral-100); } } .nav__small-span { font-size: 1em; line-height: 1; font-weight: 500; font-variation-settings: "wght" var(--wght-button); letter-spacing: -0.01em; display: inline-block; position: relative; color: inherit; padding-bottom: 0.14em; transition: font-variation-settings var(--link-duration, 0.5s) var(--link-ease, cubic-bezier(0.22, 1, 0.36, 1)); } @media (hover: hover) and (pointer: fine) { .nav__small-a:hover .nav__small-span { font-variation-settings: "wght" 540; } } .nav__small-span::after { content: ""; position: absolute; left: 0; width: 100%; bottom: 0; height: 1px; background: currentColor; border-radius: 1px; transform: scaleX(0); transform-origin: right center; transition: transform var(--link-duration, 0.5s) var(--link-ease, cubic-bezier(0.22, 1, 0.36, 1)); pointer-events: none; will-change: transform; } @media (hover: hover) and (pointer: fine) { .nav__small-a:hover .nav__small-span::after { transform: scaleX(1); transform-origin: left center; } } /* Socials — round icons, premium invert hover */ .nav__socials { margin-top: auto; padding-top: 2em; display: flex; gap: 0.375em; } .nav__social { width: var(--btn-height); height: var(--btn-height); border-radius: 10em; background: var(--color-neutral-600); display: grid; place-items: center; color: var(--color-neutral-200); transition: background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1), color 0.4s cubic-bezier(0.625, 0.05, 0, 1), box-shadow 0.4s cubic-bezier(0.625, 0.05, 0, 1); } .nav__social:hover { background: var(--color-neutral-100); /* white */ color: var(--color-neutral-900); /* black icons */ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .nav__social svg { width: 0.9em; height: 0.9em; transition: color 0.4s cubic-bezier(0.625, 0.05, 0, 1); } /* Feature / freelancer column — .nav-banner */ .nav-banner { background: var(--color-neutral-700); border-radius: 1em; width: 100%; height: 100%; min-height: 22em; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5em 2em 2em; position: relative; overflow: hidden; text-decoration: none; color: var(--color-neutral-200); transition: box-shadow 0.25s ease; } .nav-banner--freelancer:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); } .nav-banner__tags { display: flex; justify-content: center; align-items: center; gap: 0.4em; margin-bottom: 1.25em; opacity: 1; } .nav-banner__tags .eyebrow { opacity: 1; color: var(--color-neutral-200); } .nav-banner__pill { display: inline-flex; align-items: center; background: var(--color-electric); color: var(--color-neutral-800); font-family: var(--font-mono); font-size: 0.6875em; font-weight: 400; letter-spacing: 0; text-transform: uppercase; padding: 0.22em 0.55em 0.18em; border-radius: 10em; line-height: 1.2; } /* Circular Upwork portrait */ .nav-banner__avatar-wrap { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; margin: 0.25em 0 1.25em; opacity: 1; } .nav-banner__avatar { width: 8.5em; height: 8.5em; border-radius: 50%; object-fit: cover; object-position: center; display: block; border: 2px solid rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 4px rgba(161, 255, 98, 0.12), 0 12px 28px rgba(0, 0, 0, 0.35); background: var(--color-neutral-600); } /* Name title */ .nav-banner__title { font-family: var(--font-display); font-size: clamp(1.35em, 1.8vw, 1.75em); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; text-align: center; margin-bottom: 0.35em; color: var(--color-neutral-100); opacity: 1; } .nav-banner__role { font-family: var(--font-mono); font-size: 0.6875em; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-neutral-200); line-height: 1; margin-bottom: 0.25em; opacity: 0.85; } .nav-banner__btn { display: flex; justify-content: center; padding-top: 1.25em; position: relative; z-index: 2; opacity: 1; width: 100%; } /* CTA — theme electric */ .nav-banner__cta { display: inline-flex; align-items: center; justify-content: center; height: var(--btn-height); padding: 0 1.125em 0.0625em; border-radius: 0.125em; background: var(--color-electric); color: var(--color-neutral-800); font-size: 1.125em; font-weight: 500; font-variation-settings: "wght" var(--wght-button); letter-spacing: -0.02em; line-height: 1; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); transition: filter 0.2s ease; } .nav-banner--freelancer:hover .nav-banner__cta { filter: brightness(1.05); } /* ---------- Responsive ---------- */ @media (max-width: 991px) { .nav__big-span { font-size: 1.25em; } .nav__col { padding: 1.25em 2.25em 2em; } .nav__bottom-row { flex-flow: column; gap: 0; } .nav__col--ad { min-height: 18em; } } @media (max-width: 640px) { .stage { padding: 0.5em; } .nav__shell { max-width: calc(100vw - 1em) !important; } .nav[data-state="closed"] .nav__shell { border-radius: 0.5em !important; } .nav__top { height: auto; min-height: 3.375em; padding: 0.35em; } .nav__menu-label { font-size: 1em; } .nav__btn { padding: 0 1em 0.0625em; } .button-label { font-size: 1em; } .nav__logo-text { font-size: 1.2em; } .nav__bottom-inner { padding-left: 0.75em; padding-right: 0.75em; } .nav__col { padding: 1.25em; } .nav__big-a { padding-top: 0.8125em; padding-bottom: 0.875em; } .nav__socials { display: flex; } } ```` ## Source — script.js ````javascript /** * * Open width: full stage (nearly 100vw − side gaps) * * Phase 1 → expand WIDTH first * Phase 2 → open BOTTOM mega panel */ (() => { "use strict"; if (typeof gsap === "undefined") { console.error("GSAP required"); return; } const nav = document.getElementById("nav"); const shell = document.getElementById("navShell"); const toggle = document.getElementById("menuToggle"); const bottom = document.getElementById("navBottom"); const inner = document.getElementById("navBottomInner"); const line = document.getElementById("navLine"); const bars = gsap.utils.toArray(".nav__hamburger-bar"); const cols = gsap.utils.toArray("[data-col]"); const links = gsap.utils.toArray("[data-link]"); const smalls = gsap.utils.toArray("[data-small]"); const socials = gsap.utils.toArray("[data-socials] .nav__social"); const banners = gsap.utils.toArray("[data-banner]"); const avatar = document.querySelector(".nav-banner__avatar"); let isOpen = false; let tween = null; /** Shell font-size (em base) — always 16px from CSS */ function shellEm() { return parseFloat(getComputedStyle(shell).fontSize) || 16; } function closedWidthPx() { const em = shellEm(); const target = 38 * em; const max = nav.getBoundingClientRect().width || window.innerWidth - 40; return Math.min(target, max); } /** Open: full width of .nav (stage content box = nearly viewport) */ function openWidthPx() { return nav.getBoundingClientRect().width || window.innerWidth - 40; } function setClosedInstant() { const w = closedWidthPx(); gsap.set(shell, { width: w, maxWidth: w, borderRadius: 8, /* closed: soft corners, not full pill */ }); gsap.set(bottom, { gridTemplateRows: "0fr" }); gsap.set(inner, { opacity: 0, paddingTop: 0, paddingBottom: 0 }); gsap.set(line, { opacity: 0 }); gsap.set(cols, { opacity: 0, y: 28 }); gsap.set(links, { opacity: 0, y: 16 }); gsap.set(smalls, { opacity: 0, y: 12 }); gsap.set(socials, { opacity: 0, x: 0, y: 0, scale: 1 }); /* Freelancer card: opacity only — no x/y/scale motion */ gsap.set(banners, { opacity: 0, x: 0, y: 0 }); if (avatar) gsap.set(avatar, { opacity: 0, x: 0, y: 0, scale: 1 }); gsap.set(bars[0], { y: 0, rotate: 0, top: 0, bottom: "auto" }); gsap.set(bars[1], { y: 0, rotate: 0, top: "auto", bottom: 0 }); } function openMenu() { if (tween) tween.kill(); isOpen = true; nav.dataset.state = "open"; toggle.setAttribute("aria-expanded", "true"); bottom.setAttribute("aria-hidden", "false"); const fromW = shell.getBoundingClientRect().width; const toW = openWidthPx(); gsap.set(shell, { width: fromW, maxWidth: fromW }); const tl = gsap.timeline({ defaults: { ease: "power3.inOut" }, onComplete: () => { tween = null; /* Ensure all open-state copy stays fully visible */ gsap.set([inner, cols, links, smalls, socials], { opacity: 1, y: 0, clearProps: "transform", }); gsap.set(banners, { opacity: 1, x: 0, y: 0, clearProps: "transform" }); if (avatar) gsap.set(avatar, { opacity: 1, x: 0, y: 0, scale: 1 }); }, }); tween = tl; /* ===== PHASE 1: WIDTH ONLY (compact → full stage) ===== */ tl.to( shell, { width: toW, maxWidth: toW, borderRadius: 12, duration: 0.55, ease: "power3.inOut", }, 0 ) .to( bars[0], { top: "50%", y: "-50%", rotate: 45, duration: 0.4, ease: "power2.inOut", }, 0 ) .to( bars[1], { bottom: "auto", top: "50%", y: "-50%", rotate: -45, duration: 0.4, ease: "power2.inOut", }, 0 ); /* ===== PHASE 2: BOTTOM after width has led ===== */ const t2 = 0.48; tl.to( bottom, { gridTemplateRows: "1fr", duration: 0.6, ease: "power3.inOut", }, t2 ) .to(line, { opacity: 1, duration: 0.3 }, t2 + 0.05) .to( inner, { opacity: 1, paddingTop: 24, paddingBottom: 28, duration: 0.42, ease: "power2.out", }, t2 + 0.1 ) .to( cols, { opacity: 1, y: 0, duration: 0.55, stagger: 0.08, ease: "power3.out", }, t2 + 0.16 ) .to( links, { opacity: 1, y: 0, duration: 0.4, stagger: 0.03, ease: "power2.out", }, t2 + 0.26 ) .to( smalls, { opacity: 1, y: 0, duration: 0.35, ease: "power2.out", }, t2 + 0.36 ) .to( socials, { opacity: 1, duration: 0.35, stagger: 0.04, ease: "power2.out", }, t2 + 0.36 ) .to( banners, { opacity: 1, duration: 0.4, stagger: 0.04, ease: "power2.out", }, t2 + 0.28 ); if (avatar) { tl.to( avatar, { opacity: 1, duration: 0.4, ease: "power2.out", }, t2 + 0.3 ); } return tl; } function closeMenu() { if (tween) tween.kill(); isOpen = false; nav.dataset.state = "closed"; toggle.setAttribute("aria-expanded", "false"); bottom.setAttribute("aria-hidden", "true"); const toW = closedWidthPx(); const tl = gsap.timeline({ defaults: { ease: "power2.inOut" }, onComplete: () => { tween = null; gsap.set(shell, { width: toW, maxWidth: toW, borderRadius: 8, }); gsap.set(bottom, { gridTemplateRows: "0fr" }); gsap.set(inner, { opacity: 0, paddingTop: 0, paddingBottom: 0 }); }, }); tween = tl; tl.to( bars[0], { top: 0, y: 0, rotate: 0, duration: 0.35, ease: "power2.inOut", }, 0 ) .to( bars[1], { top: "auto", bottom: 0, y: 0, rotate: 0, duration: 0.35, ease: "power2.inOut", }, 0 ) .to( socials, { opacity: 0, duration: 0.18, stagger: 0.015, ease: "power2.in", }, 0 ) .to( smalls, { opacity: 0, y: 10, duration: 0.2, ease: "power2.in", }, 0 ) .to( banners, { opacity: 0, duration: 0.18, ease: "power2.in", }, 0 ) .to( avatar ? [avatar] : [], { opacity: 0, duration: 0.18, ease: "power2.in" }, 0.02 ) .to( links, { opacity: 0, y: -8, duration: 0.18, stagger: { each: 0.012, from: "end" }, ease: "power2.in", }, 0.04 ) .to( cols, { opacity: 0, y: -14, duration: 0.24, stagger: { each: 0.035, from: "end" }, ease: "power2.in", }, 0.08 ) .to( inner, { opacity: 0, paddingTop: 0, paddingBottom: 0, duration: 0.22, ease: "power2.in", }, 0.1 ) .to(line, { opacity: 0, duration: 0.2 }, 0.1) .to( bottom, { gridTemplateRows: "0fr", duration: 0.45, ease: "power3.inOut", }, 0.14 ) /* Width shrink LAST */ .to( shell, { width: toW, maxWidth: toW, borderRadius: 8, duration: 0.52, ease: "power3.inOut", }, 0.32 ); return tl; } function toggleMenu() { if (isOpen) closeMenu(); else openMenu(); } function initRotateButtons() { const YK = 30; const easeSmooth = "power3.out"; const yFromChars = (c) => Math.round(100 + YK * (12 + 6 * c)); const updateY = (btn) => { const labels = [...btn.querySelectorAll(".button-label")]; const maxC = Math.max(0, ...labels.map((l) => (l.textContent || "").trim().length)); let y = yFromChars(maxC); y = Math.max(100, Math.min(y, 10000)); btn.style.setProperty("--y", y + "%"); }; const btns = document.querySelectorAll("[data-button-rotate]"); btns.forEach((btn) => { updateY(btn); let lastTs = 0; const COOLDOWN = 100; const run = () => { const items = btn.querySelectorAll(".button-label"); if (!items.length) return; if (btn._rotTl) { btn._rotTl.kill(); btn._rotTl = null; gsap.set(items, { clearProps: "rotation" }); } const r = parseFloat(getComputedStyle(btn).getPropertyValue("--r")) || 20; const duration = 0.5; btn._rotTl = gsap.to(items, { rotation: `+=${r}`, duration, ease: easeSmooth, stagger: 0.075, overwrite: "auto", onComplete: () => { gsap.set(items, { clearProps: "rotation" }); btn._rotTl = null; }, }); }; const canTrigger = () => { const now = performance.now(); if (now - lastTs < COOLDOWN) return false; lastTs = now; return true; }; btn.addEventListener("pointerenter", () => { if (canTrigger()) run(); }); btn.addEventListener("pointerleave", () => { canTrigger(); }); }); // Recalc --y on resize (fonts / width) let rt; window.addEventListener("resize", () => { clearTimeout(rt); rt = setTimeout(() => { btns.forEach(updateY); }, 200); }); } function onResize() { if (!isOpen) { const w = closedWidthPx(); gsap.set(shell, { width: w, maxWidth: w, borderRadius: 8 }); } else { const w = openWidthPx(); gsap.set(shell, { width: w, maxWidth: w, borderRadius: 12 }); } } function init() { setClosedInstant(); initRotateButtons(); toggle.addEventListener("click", toggleMenu); document.addEventListener("keydown", (e) => { if (e.key === "Escape" && isOpen) closeMenu(); }); let t; window.addEventListener("resize", () => { clearTimeout(t); t = setTimeout(onResize, 100); }); gsap.from(shell, { y: -12, opacity: 0, duration: 0.7, ease: "power3.out", delay: 0.05, }); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { init(); } })(); ````