# Mega Navigation (Directional Hover) > A mega navigation where dropdown panels morph from the hovered item direction — fluid multi-panel site menus with mobile support. **Definition:** Mega Navigation (Directional Hover) 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-03 - Canonical page: https://html.bosconvertpro.com/collection/mega-navigation-directional-hover - Full-page preview: https://html.bosconvertpro.com/collection/mega-navigation-directional-hover/full - Live demo: https://html.bosconvertpro.com/demos/mega-navigation-directional-hover/index.html - Markdown mirror: https://html.bosconvertpro.com/collection/mega-navigation-directional-hover/index.md - License: https://html.bosconvertpro.com/terms ## How to use 1. Open https://html.bosconvertpro.com/collection/mega-navigation-directional-hover/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-navigation-directional-hover. 3. Paste the files into your project and adjust timing, easing, and content as needed. ## FAQ ### What is Mega Navigation (Directional Hover)? Mega Navigation (Directional Hover) is a navigation UI animation from collections.html. A mega navigation where dropdown panels morph from the hovered item direction — fluid multi-panel site menus with mobile support. ### What is Mega Navigation (Directional Hover) built with? Mega Navigation (Directional Hover) 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 Navigation (Directional Hover) in my project? Open the animation page (https://html.bosconvertpro.com/collection/mega-navigation-directional-hover), 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-navigation-directional-hover/index.html. ### Is Mega Navigation (Directional Hover) free to use? Yes. The Mega Navigation (Directional Hover) 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 Mega Navigation (Directional Hover)
```` ## Source — styles.css ````css :root { --ink: #0f0e0c; --text: #1c1917; --text-soft: rgba(28, 25, 23, 0.58); --surface: #ffffff; --surface-warm: #f7f5f2; --surface-accent: #f0ebe3; --border: rgba(15, 14, 12, 0.08); --border-strong: rgba(15, 14, 12, 0.12); --accent: #1c1917; --accent-text: #f7f5f2; --accent-hover: #2a2622; --champagne: #b8a07a; --champagne-soft: rgba(184, 160, 122, 0.14); --backdrop: rgba(15, 14, 12, 0.28); --shadow: 0 24px 64px rgba(15, 14, 12, 0.08); --font: "DM Sans", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --radius: 0.375em; --nav-height: 4em; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: initial; scrollbar-width: none; } html, body { width: 100%; min-height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { color: var(--text); background-color: var(--surface-warm); font-family: var(--font); font-size: 1em; font-weight: 400; line-height: 1.25; -ms-overflow-style: none; } body::-webkit-scrollbar { display: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } [data-menu-wrap] { --nav-height: 4em; } .section-resource { position: relative; display: flex; justify-content: center; align-items: center; min-height: 100svh; } .resource-bg { position: absolute; inset: 0; z-index: 0; } .resource-bg__img { width: 100%; height: 100%; object-fit: cover; } .resource-bg__veil { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(15, 14, 12, 0.18) 0%, rgba(15, 14, 12, 0.08) 40%, rgba(15, 14, 12, 0.22) 100% ); pointer-events: none; } .mega-nav { position: fixed; z-index: 100; top: 0; left: 0; right: 0; width: 100%; } .mega-nav__bar { position: relative; z-index: 3; width: 100%; max-width: none; margin-left: 0; margin-right: 0; background-color: var(--surface); border: none; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: 0 8px 32px rgba(15, 14, 12, 0.06); } .mega-nav__container { display: flex; justify-content: space-between; align-items: center; width: 100%; height: var(--nav-height); padding: 1em clamp(1rem, 3vw, 2.5rem); } .mega-nav__bar-start { position: relative; display: flex; justify-content: flex-start; align-items: center; width: 100%; } .mega-nav__bar-inner { display: flex; justify-content: flex-start; align-items: center; width: 100%; gap: 0.75em; margin-bottom: 0; padding-left: 0; list-style: none; } .mega-nav__bar-list { display: flex; justify-content: flex-start; align-items: center; gap: 0.35em; margin-bottom: 0; padding-left: 0; list-style: none; } .mega-nav__bar-list.is--actions { margin-left: auto; gap: 0.5em; } .mega-nav__bar-link { display: flex; justify-content: flex-start; align-items: center; color: var(--text); background-color: transparent; border-radius: var(--radius); padding: 0.4em 0.7em; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .mega-nav__bar-link:hover { background-color: var(--surface-warm); } .mega-nav__bar-link-label { font-size: 0.9375em; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; } .mega-nav__bar-link-icon { width: 1.25em; opacity: 0.55; } .mega-nav__bar-end { display: none; justify-content: flex-end; align-items: center; gap: 0.75em; } .mega-nav__bar-cta { display: flex; justify-content: center; align-items: center; gap: 0.15em; color: var(--accent-text); background-color: var(--accent); border-radius: 999px; padding: 0.45em 0.9em; text-decoration: none; box-shadow: 0 1px 2px rgba(15, 14, 12, 0.08); transition: background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), padding 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .mega-nav__bar-cta:hover { background-color: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 14, 12, 0.18); padding-left: 1.05em; padding-right: 1.05em; } .mega-nav__bar-cta:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(15, 14, 12, 0.12); } .mega-nav__bar-cta .mega-nav__bar-link-icon { opacity: 0.85; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; } .mega-nav__bar-cta:hover .mega-nav__bar-link-icon { transform: translateX(3px); opacity: 1; } .mega-nav__bar-cta.is--secondary { color: var(--text); background-color: transparent; border: 1px solid var(--border-strong); box-shadow: none; } .mega-nav__bar-cta.is--secondary:hover { color: var(--accent-text); background-color: var(--accent); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 14, 12, 0.14); } .mega-nav__bar-cta.is--secondary:active { transform: translateY(0); } .mega-nav__burger { display: flex; flex-flow: column; justify-content: center; align-items: center; gap: 0.2em; width: 2.5em; height: 2.5em; padding: 0; background-color: var(--surface-accent); border-radius: var(--radius); transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .mega-nav__burger:hover { background-color: var(--surface-warm); transform: scale(1.05); } .mega-nav__burger-line { position: relative; z-index: 1; display: block; flex: none; width: 1.25em; height: 0.125em; padding: 0; background-color: var(--ink); border-radius: 0.125em; } .mega-nav__back { position: absolute; z-index: 2; left: 0; opacity: 0; visibility: hidden; } .mega-nav__backdrop { position: fixed; z-index: 0; inset: 0; opacity: 0; pointer-events: none; visibility: hidden; background-color: var(--backdrop); } .mega-nav__dropdown-wrapper { position: absolute; z-index: 2; top: 100%; left: 0; right: 0; width: 100%; max-width: none; margin-left: 0; margin-right: 0; pointer-events: none; } .mega-nav__dropdown-container { position: relative; overflow: hidden; box-shadow: 0 16px 40px rgba(15, 14, 12, 0.08); } .mega-nav__dropdown-bg { position: absolute; inset: 0; will-change: transform; background-color: var(--surface); border: none; border-bottom: 1px solid var(--border); border-radius: 0; } .mega-nav__dropdown-panel { position: absolute; inset: 0 0 auto; overflow: hidden; opacity: 0; pointer-events: none; visibility: hidden; } .mega-nav__dropdown-inner { display: flex; } .mega-nav__panel-col { display: flex; flex: 1; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 1.25em; padding: 2.5em 1.5em; border-right: 1px solid var(--border); } .mega-nav__panel-col:last-of-type { border: none; } .mega-nav__panel-col.is--colored { background-color: var(--surface-accent); } .mega-nav__panel-col.is--colored.has--card { padding-top: 1.5em; padding-bottom: 1.5em; } .mega-nav__panel-label { padding-left: 1em; font-family: var(--font-mono); font-size: 0.6875em; font-weight: 500; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); } .mega-nav__panel-list { display: flex; flex-flow: column; justify-content: flex-start; align-items: stretch; gap: 0; width: 100%; margin-bottom: 0; padding: 0; list-style: none; } .mega-nav__panel-link { display: flex; flex-flow: column; justify-content: flex-start; align-items: flex-start; color: var(--text); border-radius: var(--radius); padding: 0.625em 0.75em; text-decoration: none; transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .mega-nav__panel-link:hover { background-color: rgba(15, 14, 12, 0.04); padding-left: 1.15em; } .mega-nav__panel-col.is--colored .mega-nav__panel-link:hover { background-color: rgba(255, 255, 255, 0.55); } .mega-nav__panel-link-text { font-weight: 500; letter-spacing: -0.01em; } .mega-nav__panel-link-desc { color: var(--text-soft); font-size: 0.875em; font-weight: 400; } .mega-nav__card { display: flex; flex-flow: column; width: 100%; overflow: hidden; background-color: var(--surface); border-radius: 0.5em; border: 1px solid var(--border); } .mega-nav__card-visual { position: relative; width: 100%; height: 16.25em; } .mega-nav__card-img { width: 100%; height: 100%; object-fit: cover; } .mega-nav__card-content { display: flex; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 1.25em; padding: 1.5em; } .mega-nav__card-text { display: flex; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 0.25em; } .mega-nav__card-cta { display: flex; justify-content: center; align-items: center; gap: 0.15em; color: var(--accent-text); background-color: var(--accent); border-radius: 999px; padding: 0.45em 0.9em; text-decoration: none; box-shadow: 0 1px 2px rgba(15, 14, 12, 0.08); transition: background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), padding 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .mega-nav__card-cta:hover { background-color: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 14, 12, 0.18); padding-left: 1.05em; padding-right: 1.05em; } .mega-nav__card-cta:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(15, 14, 12, 0.12); } .mega-nav__card-cta-label { font-size: 0.9375em; font-weight: 500; line-height: 1.2; } .mega-nav__card-cta-icon { width: 1.25em; opacity: 0.85; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; } .mega-nav__card-cta:hover .mega-nav__card-cta-icon { transform: translateX(3px); opacity: 1; } @media screen and (max-width: 1100px) { .mega-nav__panel-col { padding: 2em 1.15em; gap: 1em; } .mega-nav__card-visual { height: 13em; } } @media screen and (max-width: 991px) { [data-menu-wrap] { --nav-height: 3.75em; } .mega-nav { top: 0; left: 0; right: 0; width: 100%; } .mega-nav__bar { border-radius: 0; border: none; border-bottom: 1px solid var(--border); box-shadow: none; } .mega-nav__container { height: var(--nav-height); padding: 0.75em max(1rem, env(safe-area-inset-right)) 0.75em max(1rem, env(safe-area-inset-left)); } .mega-nav__bar-start { justify-content: flex-end; align-items: center; min-height: 100%; } .mega-nav__bar-end { display: flex; margin-left: auto; position: relative; z-index: 5; } .mega-nav__back { left: max(0.25rem, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); } .mega-nav__back .mega-nav__bar-link { width: auto; padding: 0.5em 0.65em; border-bottom: none; font-size: 1em; border-radius: var(--radius); } .mega-nav__back .mega-nav__bar-link-label { font-size: 0.9375em; } .mega-nav__bar-list { flex-flow: column; justify-content: flex-start; align-items: stretch; gap: 0; width: 100%; } .mega-nav__bar-list.is--actions { flex-flow: column; justify-content: flex-start; align-items: stretch; gap: 0.75em; margin-left: 0; margin-top: auto; width: 100%; padding-top: 1.5em; padding-bottom: max(1rem, env(safe-area-inset-bottom)); } .mega-nav__bar-link { width: 100%; min-height: 3.25em; padding: 1em 0.15em; border-bottom: 1px solid var(--border); border-radius: 0; font-size: 1.125em; } .mega-nav__bar-link:hover { background-color: transparent; } .mega-nav__bar-link:active { background-color: var(--surface-warm); } .mega-nav__bar-link.is--dropdown { justify-content: space-between; align-items: center; } .mega-nav__bar-link.is--back { border-bottom-style: none; font-size: 1em; } .mega-nav__bar-link-label { font-size: 1.25em; } .mega-nav__bar-link-icon { width: 1.5em; opacity: 0.7; } .mega-nav__bar-link-icon.is--dropdown { transform: rotate(-90deg); } .mega-nav__bar-cta { width: 100%; justify-content: center; min-height: 3.25em; padding: 0.9em 1.1em; transform: none; box-shadow: none; } .mega-nav__bar-cta:hover, .mega-nav__bar-cta.is--secondary:hover { transform: none; box-shadow: none; padding-left: 1.1em; padding-right: 1.1em; } .mega-nav__bar-cta:active { transform: scale(0.98); } .mega-nav__bar-action { flex: none; width: 100%; } .mega-nav__bar-inner { position: fixed; z-index: 3; top: var(--nav-height); right: 0; bottom: 0; left: 0; flex-flow: column; justify-content: flex-start; align-items: stretch; width: 100%; gap: 0; padding: 0.5em max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: var(--surface); opacity: 0; visibility: hidden; pointer-events: none; } .mega-nav[data-menu-open="true"] .mega-nav__bar-inner { pointer-events: auto; } .mega-nav__backdrop { display: none; } .mega-nav__dropdown-wrapper { position: fixed; z-index: 4; top: var(--nav-height); right: 0; bottom: 0; left: 0; width: 100%; height: auto; pointer-events: none; } .mega-nav__dropdown-container { height: 100%; overflow: hidden; box-shadow: none; } .mega-nav__dropdown-bg { display: none; } .mega-nav__dropdown-panel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: var(--surface); pointer-events: none; } .mega-nav__dropdown-inner { flex-flow: column; min-height: 100%; } .mega-nav__panel-col { flex: none; width: 100%; padding: 1.5em max(1.25rem, env(safe-area-inset-right)) 1.5em max(1.25rem, env(safe-area-inset-left)); border-right-style: none; border-bottom: 1px solid var(--border); } .mega-nav__panel-col:last-of-type { border-bottom: none; padding-bottom: max(2em, env(safe-area-inset-bottom)); } .mega-nav__panel-label { width: 100%; padding-left: 0.75em; } .mega-nav__panel-link { padding: 0.85em 0.75em; } .mega-nav__panel-link:hover { padding-left: 1.1em; } .mega-nav__panel-link:active { background-color: rgba(15, 14, 12, 0.05); } .mega-nav__panel-col.is--colored.has--card { padding-top: 1.25em; padding-bottom: max(1.5em, env(safe-area-inset-bottom)); } .mega-nav__card { border-radius: 0.75em; } .mega-nav__card-visual { height: min(42vw, 14em); } .mega-nav__card-cta:hover { transform: none; box-shadow: none; } .mega-nav__burger { width: 2.75em; height: 2.75em; } .mega-nav__burger:hover { transform: none; } .mega-nav__burger:active { transform: scale(0.96); } } @media screen and (max-width: 640px) { [data-menu-wrap] { --nav-height: 3.5em; } .mega-nav__bar-link-label { font-size: 1.125em; } .mega-nav__bar-link { min-height: 3em; padding: 0.9em 0.1em; } .mega-nav__panel-link-text { font-size: 1.05em; } .mega-nav__panel-link-desc { font-size: 0.8125em; } .mega-nav__card-content { gap: 1em; padding: 1.15em; } } @media screen and (max-width: 479px) { .mega-nav__container { padding-left: max(0.85rem, env(safe-area-inset-left)); padding-right: max(0.85rem, env(safe-area-inset-right)); } .mega-nav__bar-inner { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } .mega-nav__bar-link-label { font-size: 1.0625em; } .mega-nav__bar-link-icon { width: 1.375em; } .mega-nav__bar-list.is--actions { gap: 0.6em; } .mega-nav__bar-cta { min-height: 3em; font-size: 0.95em; } .mega-nav__panel-col { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } .mega-nav__panel-col.is--colored.has--card { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } .mega-nav__card-visual { height: 11.5em; } .mega-nav__card-content { padding: 1em 1em 1.25em; } .mega-nav__card-cta-label { font-size: 0.9375em; } .mega-nav__card-cta-icon { width: 1.25em; } } @media (hover: none) and (pointer: coarse) { .mega-nav__bar-cta:hover, .mega-nav__bar-cta.is--secondary:hover, .mega-nav__card-cta:hover { transform: none; box-shadow: none; } .mega-nav__panel-link:hover { padding-left: 0.75em; } .mega-nav__panel-link:active { padding-left: 1.1em; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } ```` ## Source — script.js ````javascript function initMegaNavDirectionalHover() { const DUR = { bgMorph: 0.4, contentIn: 0.3, contentOut: 0.2, stagger: 0.25, backdropIn: 0.3, backdropOut: 0.2, openScale: 0.35, closeScale: 0.25, }; const HOVER_ENTER = 120; const HOVER_LEAVE = 150; const menuWrap = document.querySelector("[data-menu-wrap]"); const navList = document.querySelector("[data-nav-list]"); const dropWrapper = document.querySelector("[data-dropdown-wrapper]"); const dropContainer = document.querySelector("[data-dropdown-container]"); const dropBg = document.querySelector("[data-dropdown-bg]"); const backdrop = document.querySelector("[data-menu-backdrop]"); const toggles = [...document.querySelectorAll("[data-dropdown-toggle]")]; const panels = [...document.querySelectorAll("[data-nav-content]")]; const burger = document.querySelector("[data-burger-toggle]"); const backBtn = document.querySelector("[data-mobile-back]"); const [lineTop, lineMid, lineBot] = ["top", "mid", "bot"].map( (id) => document.querySelector(`[data-burger-line='${id}']`) ); const state = { isOpen: false, activePanel: null, activePanelIndex: -1, isMobile: window.innerWidth <= 991, mobileMenuOpen: false, mobilePanelActive: null, hoverTimer: null, leaveTimer: null, tl: null, mobileTl: null, mobilePanelTl: null, }; const getPanel = (name) => document.querySelector(`[data-nav-content="${name}"]`); const getToggle = (name) => document.querySelector(`[data-dropdown-toggle="${name}"]`); const getFade = (el) => el.querySelectorAll("[data-menu-fade]"); const getNavItems = () => navList.querySelectorAll("[data-nav-list-item]"); const getIndex = (name) => toggles.indexOf(getToggle(name)); const stagger = (n) => (n <= 1 ? 0 : { amount: DUR.stagger }); function clearTimers() { clearTimeout(state.hoverTimer); clearTimeout(state.leaveTimer); state.hoverTimer = state.leaveTimer = null; } function killTl(key) { if (state[key]) { state[key].kill(); state[key] = null; } } function killDropdown() { killTl("tl"); gsap.killTweensOf(dropContainer); gsap.killTweensOf(backdrop); panels.forEach((p) => { gsap.killTweensOf(p); gsap.killTweensOf(getFade(p)); }); } function killMobile() { killTl("mobileTl"); gsap.killTweensOf([navList, lineTop, lineMid, lineBot]); } function killMobilePanel() { killTl("mobilePanelTl"); gsap.killTweensOf(getNavItems()); if (backBtn) gsap.killTweensOf(backBtn); panels.forEach((p) => { gsap.killTweensOf(p); gsap.killTweensOf(getFade(p)); }); } function resetToggles() { toggles.forEach((t) => t.setAttribute("aria-expanded", "false")); } function resetDesktop() { panels.forEach((p) => { gsap.set(p, { visibility:"hidden", opacity:0, pointerEvents:"none", x:0, y:0, xPercent:0 }); gsap.set(getFade(p), { autoAlpha:0, x:0, y:0, xPercent:0 }); }); gsap.set(dropContainer, { height:0, clearProps:"transform" }); gsap.set(backdrop, { autoAlpha:0 }); menuWrap.setAttribute("data-menu-open", "false"); resetToggles(); } function setupMobile() { panels.forEach((p) => { gsap.set(p, { autoAlpha: 0, xPercent: 0, visibility: "visible", pointerEvents: "none" }); gsap.set(getFade(p), { xPercent: 20, autoAlpha: 0 }); }); gsap.set(getNavItems(), { xPercent: 0, y: 0, autoAlpha: 1 }); gsap.set(navList, { autoAlpha: 0, x: 0, pointerEvents: "none" }); gsap.set(dropWrapper, { pointerEvents: "none" }); if (backBtn) gsap.set(backBtn, { autoAlpha: 0 }); gsap.set(dropContainer, { clearProps: "height" }); gsap.set(backdrop, { autoAlpha: 0 }); } function measurePanel(name) { const el = getPanel(name); if (!el) return 0; const s = el.style; const prev = [s.visibility, s.opacity, s.pointerEvents]; Object.assign(s, { visibility: "visible", opacity: "0", pointerEvents: "none" }); const h = el.getBoundingClientRect().height; [s.visibility, s.opacity, s.pointerEvents] = prev; return h; } function openDropdown(panelName) { if (state.isOpen && state.activePanel === panelName) return; if (state.isOpen) return switchPanel(state.activePanel, panelName); const height = measurePanel(panelName); if (!height) return; killDropdown(); resetDesktop(); const el = getPanel(panelName); const fade = getFade(el); const toggle = getToggle(panelName); state.isOpen = true; state.activePanel = panelName; state.activePanelIndex = getIndex(panelName); menuWrap.setAttribute("data-menu-open", "true"); if (toggle) toggle.setAttribute("aria-expanded", "true"); gsap.set(dropContainer, { height: 0 }); const tl = gsap.timeline(); state.tl = tl; tl.to(backdrop, { autoAlpha: 1, duration: DUR.backdropIn, ease: "power2.out" }, 0); tl.to(dropContainer, { height, duration: DUR.openScale, ease: "power3.out" }, 0); tl.set(el, { visibility: "visible", opacity: 1, pointerEvents: "auto" }, 0.05); if (fade.length) { tl.fromTo(fade, { autoAlpha: 0, y: 8 }, { autoAlpha: 1, y: 0, duration: DUR.contentIn, stagger: stagger(fade.length), ease: "power3.out" }, 0.1 ); } } function closeDropdown() { if (!state.isOpen) return; const el = getPanel(state.activePanel); const fade = el ? getFade(el) : []; killDropdown(); const tl = gsap.timeline({ onComplete() { state.isOpen = false; state.activePanel = null; state.activePanelIndex = -1; state.tl = null; resetDesktop(); }, }); state.tl = tl; if (fade.length) tl.to(fade, { autoAlpha: 0, y: -4, duration: DUR.contentOut * 0.7, ease: "power2.in" }, 0); tl.to(dropContainer, { height: 0, duration: DUR.closeScale, ease: "power2.in" }, 0.05); tl.to(backdrop, { autoAlpha: 0, duration: DUR.backdropOut, ease: "power2.out" }, 0); if (el) tl.set(el, { visibility: "hidden", opacity: 0, pointerEvents: "none" }); } function switchPanel(fromName, toName) { const dir = getIndex(toName) > getIndex(fromName) ? 1 : -1; const fromEl = getPanel(fromName), toEl = getPanel(toName); if (!fromEl || !toEl) return; const fromFade = getFade(fromEl), toFade = getFade(toEl); const toHeight = measurePanel(toName); if (!toHeight) return; killDropdown(); panels.forEach((p) => { gsap.set(p, { visibility: "hidden", opacity: 0, pointerEvents: "none", xPercent: 0 }); gsap.set(getFade(p), { autoAlpha: 0, x: 0, y: 0 }); }); gsap.set(fromEl, { visibility: "visible", opacity: 1, pointerEvents: "auto", x: 0 }); if (fromFade.length) gsap.set(fromFade, { autoAlpha: 1, x: 0, y: 0 }); gsap.set(backdrop, { autoAlpha: 1 }); const toToggle = getToggle(toName); state.activePanel = toName; state.activePanelIndex = getIndex(toName); resetToggles(); if (toToggle) toToggle.setAttribute("aria-expanded", "true"); const xOut = dir * -30, xIn = dir * 30; const tl = gsap.timeline(); state.tl = tl; if (fromFade.length) tl.to(fromFade, { autoAlpha: 0, x: xOut, duration: DUR.contentOut, ease: "power2.in" }, 0); tl.set(fromEl, { visibility: "hidden", opacity: 0, pointerEvents: "none", xPercent: 0 }, DUR.contentOut); if (fromFade.length) tl.set(fromFade, { x: 0 }, DUR.contentOut); tl.to(dropContainer, { height: toHeight, duration: DUR.bgMorph, ease: "power3.out" }, 0.05); tl.set(toEl, { visibility: "visible", opacity: 1, pointerEvents: "auto", xPercent: 0 }, DUR.contentOut * 0.5); if (toFade.length) { tl.fromTo(toFade, { autoAlpha: 0, x: xIn }, { autoAlpha: 1, x: 0, duration: DUR.contentIn, stagger: stagger(toFade.length), ease: "power3.out" }, DUR.contentOut * 0.6 ); } } function handleToggleEnter(e) { if (state.isMobile) return; const name = e.currentTarget.getAttribute("data-dropdown-toggle"); if (!name) return; clearTimeout(state.leaveTimer); state.leaveTimer = null; clearTimeout(state.hoverTimer); state.hoverTimer = setTimeout(() => openDropdown(name), state.isOpen ? 0 : HOVER_ENTER); } function handleToggleLeave() { if (state.isMobile) return; clearTimeout(state.hoverTimer); state.hoverTimer = null; state.leaveTimer = setTimeout(closeDropdown, HOVER_LEAVE); } function handleWrapperEnter() { if (state.isMobile) return; clearTimeout(state.leaveTimer); state.leaveTimer = null; } function handleWrapperLeave() { if (state.isMobile) return; state.leaveTimer = setTimeout(closeDropdown, HOVER_LEAVE); } function handleEscape(e) { if (e.key !== "Escape") return; if (state.isMobile) { state.mobilePanelActive ? closeMobilePanel() : state.mobileMenuOpen && closeMobileMenu(); return; } if (state.isOpen) { const t = getToggle(state.activePanel); closeDropdown(); if (t) t.focus(); } } function handleDocClick(e) { if (state.isMobile || !state.isOpen) return; if (!e.target.closest("[data-menu-wrap]")) closeDropdown(); } function focusFirstLink(panelName) { setTimeout(() => { const el = getPanel(panelName); if (!el) return; const link = el.querySelector("a"); if (!link) return; gsap.set(link, { visibility: "visible" }); link.focus(); }, 80); } function handleKeydownOnToggle(e) { if (state.isMobile) return; const name = e.currentTarget.getAttribute("data-dropdown-toggle"); if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (state.isOpen && state.activePanel === name) closeDropdown(); else { openDropdown(name); focusFirstLink(name); } return; } if (e.key === "ArrowDown") { e.preventDefault(); if (!state.isOpen || state.activePanel !== name) openDropdown(name); focusFirstLink(name); } if (e.key === "Tab" && !e.shiftKey && state.isOpen && state.activePanel === name) { e.preventDefault(); const link = getPanel(name)?.querySelector("a"); if (link) link.focus(); } } function handleKeydownInPanel(e) { if (state.isMobile || !state.isOpen) return; const el = getPanel(state.activePanel); if (!el) return; const links = [...el.querySelectorAll("a")]; const idx = links.indexOf(document.activeElement); if (e.key === "ArrowDown") { e.preventDefault(); links[(idx + 1) % links.length].focus(); } if (e.key === "ArrowUp") { e.preventDefault(); if (idx <= 0) { const t = getToggle(state.activePanel); if (t) t.focus(); } else links[idx - 1].focus(); } if (e.key === "Tab" && !e.shiftKey && idx === links.length - 1) { e.preventDefault(); const curIdx = toggles.indexOf(getToggle(state.activePanel)); const next = curIdx < toggles.length - 1 ? toggles[curIdx + 1] : null; closeDropdown(); if (next) next.focus(); } if (e.key === "Tab" && e.shiftKey && idx === 0) { e.preventDefault(); const t = getToggle(state.activePanel); if (t) t.focus(); } } function animateBurger(toX) { const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } }); if (toX) { tl.to(lineTop, { y: "0.3125em", duration: 0.15 }, 0); tl.to(lineBot, { y: "-0.3125em", duration: 0.15 }, 0); tl.to(lineMid, { autoAlpha: 0, duration: 0.1 }, 0.1); tl.to(lineTop, { rotation: 45, duration: 0.2 }, 0.15); tl.to(lineBot, { rotation: -45, duration: 0.2 }, 0.15); } else { tl.to(lineTop, { rotation: 0, duration: 0.2 }, 0); tl.to(lineBot, { rotation: 0, duration: 0.2 }, 0); tl.to(lineTop, { y: 0, duration: 0.15 }, 0.15); tl.to(lineBot, { y: 0, duration: 0.15 }, 0.15); tl.to(lineMid, { autoAlpha: 1, duration: 0.1 }, 0.15); } return tl; } function openMobileMenu() { killMobile(); state.mobileMenuOpen = true; menuWrap.setAttribute("data-menu-open", "true"); burger.setAttribute("aria-expanded", "true"); document.body.style.overflow = "hidden"; const items = getNavItems(); const tl = gsap.timeline(); state.mobileTl = tl; tl.add(animateBurger(true), 0); tl.set(navList, { pointerEvents: "auto" }, 0); tl.to(navList, { autoAlpha: 1, duration: 0.3, ease: "power2.out" }, 0); if (items.length) { tl.fromTo(items, { autoAlpha: 0, y: 12 }, { autoAlpha: 1, y: 0, duration: 0.3, stagger: 0.04, ease: "power3.out" }, 0.15 ); } } function closeMobileMenu() { const hadPanel = state.mobilePanelActive; const panelEl = hadPanel ? getPanel(hadPanel) : null; killMobile(); killMobilePanel(); menuWrap.setAttribute("data-menu-open", "false"); state.mobileMenuOpen = false; state.mobilePanelActive = null; burger.setAttribute("aria-expanded", "false"); const tl = gsap.timeline({ onComplete() { document.body.style.overflow = ""; state.mobileTl = null; setupMobile(); }, }); state.mobileTl = tl; tl.add(animateBurger(false), 0); if (hadPanel && panelEl) { tl.to(panelEl, { autoAlpha: 0, duration: 0.3, ease: "power2.inOut" }, 0.05); if (backBtn) tl.to(backBtn, { autoAlpha: 0, duration: 0.2, ease: "power2.in" }, 0.05); } tl.set(dropWrapper, { pointerEvents: "none" }, 0); tl.to(navList, { autoAlpha: 0, duration: 0.3, ease: "power2.inOut", pointerEvents: "none" }, 0.05); } function openMobilePanel(panelName) { const el = getPanel(panelName); if (!el) return; killMobilePanel(); state.mobilePanelActive = panelName; const navItems = getNavItems(); const panelFade = getFade(el); const tl = gsap.timeline(); state.mobilePanelTl = tl; if (navItems.length) { tl.to(navItems, { xPercent: -10, autoAlpha: 0, duration: 0.35, stagger: 0.03, ease: "power2.in", }, 0); } if (backBtn) tl.to(backBtn, { autoAlpha: 1, duration: 0.25, ease: "power2.inOut" }, 0.1); tl.set(navList, { pointerEvents: "none" }, 0.15); tl.set(dropWrapper, { pointerEvents: "auto" }, 0.15); tl.set(el, { autoAlpha: 1, xPercent: 0, pointerEvents: "auto" }, 0.2); if (panelFade.length) { tl.fromTo(panelFade, { xPercent: 8, autoAlpha: 0 }, { xPercent: 0, autoAlpha: 1, duration: 0.3, stagger: stagger(panelFade.length), ease: "power3.out" }, 0.25 ); } } function closeMobilePanel() { if (!state.mobilePanelActive) return; const el = getPanel(state.mobilePanelActive); if (!el) return; killMobilePanel(); const navItems = getNavItems(); const panelFade = getFade(el); const tl = gsap.timeline({ onComplete() { state.mobilePanelActive = null; state.mobilePanelTl = null; }, }); state.mobilePanelTl = tl; if (panelFade.length) { tl.to(el, { xPercent: 20, autoAlpha: 0, duration: 0.3, stagger: 0.02, ease: "power2.in", }, 0); } tl.set(el, { autoAlpha: 0, pointerEvents: "none" }, 0.25); tl.set(dropWrapper, { pointerEvents: "none" }, 0.25); tl.set(navList, { pointerEvents: "auto" }, 0.25); if (backBtn) tl.to(backBtn, { autoAlpha: 0, duration: 0.2, ease: "power2.in" }, 0); if (navItems.length) { tl.fromTo(navItems, { xPercent: -20, autoAlpha: 0 }, { xPercent: 0, autoAlpha: 1, duration: 0.35, stagger: 0.03, ease: "power3.out" }, 0.25 ); } } function handleToggleClick(e) { if (!state.isMobile || !state.mobileMenuOpen) return; const name = e.currentTarget.getAttribute("data-dropdown-toggle"); if (name) { e.preventDefault(); openMobilePanel(name); } } let resizeTimer = null; let lastWidth = window.innerWidth; function handleResize() { const w = window.innerWidth; if (w === lastWidth) return; lastWidth = w; clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { const was = state.isMobile; state.isMobile = window.innerWidth <= 991; if (was && !state.isMobile) { killMobile(); killMobilePanel(); gsap.set(navList, { clearProps: "all" }); gsap.set(getNavItems(), { clearProps: "all" }); gsap.set(dropWrapper, { clearProps: "all" }); panels.forEach((p) => { gsap.set(p, { clearProps: "all" }); gsap.set(getFade(p), { clearProps: "all" }); }); if (backBtn) gsap.set(backBtn, { autoAlpha: 0 }); gsap.set([lineTop, lineMid, lineBot], { rotation: 0, y: 0, autoAlpha: 1 }); burger.setAttribute("aria-expanded", "false"); state.mobileMenuOpen = false; state.mobilePanelActive = null; document.body.style.overflow = ""; resetDesktop(); } if (!was && state.isMobile) { killDropdown(); state.isOpen = false; state.activePanel = null; state.activePanelIndex = -1; clearTimers(); menuWrap.setAttribute("data-menu-open", "false"); resetToggles(); setupMobile(); } }, 150); } toggles.forEach((btn) => { btn.addEventListener("mouseenter", handleToggleEnter); btn.addEventListener("mouseleave", handleToggleLeave); btn.addEventListener("keydown", handleKeydownOnToggle); btn.addEventListener("click", handleToggleClick); }); dropWrapper.addEventListener("mouseenter", handleWrapperEnter); dropWrapper.addEventListener("mouseleave", handleWrapperLeave); panels.forEach((p) => p.addEventListener("keydown", handleKeydownInPanel)); backdrop.addEventListener("click", closeDropdown); document.addEventListener("keydown", handleEscape); document.addEventListener("click", handleDocClick); burger.addEventListener("click", () => state.mobileMenuOpen ? closeMobileMenu() : openMobileMenu()); backBtn.addEventListener("click", closeMobilePanel); window.addEventListener("resize", handleResize); state.isMobile ? setupMobile() : resetDesktop(); } document.addEventListener("DOMContentLoaded", () => { initMegaNavDirectionalHover(); }); ````