FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Add a mega menu with per-item featured content to the primary navigation by mlaetitia · Pull Request #223 · OpenSourceOrg/dotOrg · GitHub

Add a mega menu with per-item featured content to the primary navigation - #223

Draft
mlaetitia wants to merge 14 commits into
mainfrom
add/t51eng-2081-megamenu
Draft

Add a mega menu with per-item featured content to the primary navigation#223
mlaetitia wants to merge 14 commits into
mainfrom
add/t51eng-2081-megamenu

Conversation

mlaetitia commented Jul 30, 2026
edited
Loading

Copy link
Copy Markdown
Collaborator

Related to Linear T51ENG-2081 (no GitHub issue exists for this request).

Proposed changes

  • Revive the osi theme's dormant mega menu: full-bleed dropdown panels for top-level items carrying the megamenu class, rendered by OSI_Megamenu_Walker with a section header row (eyebrow + tagline from the menu item's Description field).
  • Header turns white with a page dim behind while a panel is open; the transparent-until-scroll behavior is kept.
  • Keyboard, touch, and ARIA support; mobile submenu toggle accessibility fixes.
  • New partner-editable featured content card per dropdown: two ACF fields on primary-menu items (a page/post picker and a heading), rendered as a fourth panel column with image, title, and excerpt. Items with no selection keep the plain three-column panel.
  • Field registration and resolution live in inc/megamenu-featured.php. The feature degrades cleanly if ACF is deactivated, only publicly-viewable non-password-protected posts render, and the card image is lazy-loaded so it never consumes the page's fetchpriority=high slot in the header.

Why are these changes being made?

  • The partner asked for a CNCF-style mega menu for the new seven-section navigation structure, including a featured area per dropdown that they can update themselves without code changes (confirmed in the Linear thread). Both the menu structure and the featured content are edited in Appearance > Menus, so the regular menu-building flow covers setup end to end.

Testing instructions

Setup: on the Menus screen (Appearance > Menus), open Screen Options (top right) and enable "CSS Classes" and "Description" under advanced menu properties - both fields are hidden by default.

Mega menu behavior:

  • Give a top-level menu item (with nested sub-items) the megamenu CSS class and save. At >= 1200px width, hover or focus it: the panel opens full-bleed, the header turns white, the page dims; Escape closes it; tab focus and touch behave the same.
  • The item's Description field renders as the panel tagline under the section eyebrow; leave it empty and only the eyebrow shows.
  • Items WITHOUT the megamenu class keep the classic narrow dropdown - the feature is opt-in per item, so an existing menu renders unchanged after deploy.
  • In the expanded menu item, pick a page or post under "Featured item", optionally change "Featured heading", save: the panel gains a fourth-column card (image, title, excerpt) linking to the selection. Clear the field and the panel returns to three columns. A draft, private, or password-protected selection renders no card.
  • Deactivate ACF: the site must not fatal; panels render without cards and selections survive reactivation.

Shared surfaces (apply to any menu, including the current production menu):

  • Below 1200px: the mobile accordion opens/closes correctly, toggle buttons announce their state (aria-expanded), and the hamburger still works.
  • Placeholder items (URL "#") inside dropdowns render as non-clickable labels and are skipped when tabbing.
  • Top-level items show the new green underline hover treatment (intended design change).

🤖 Generated with Claude Code

mlaetitia and others added 4 commits July 28, 2026 19:21
…eader and page dim while open, keyboard/touch/ARIA support, and mobile submenu toggle accessibility fixes
…CF fields on menu items

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…h-stripping thumbnail filter cannot break the lazy image's intrinsic height

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…he code already explains, across the megamenu PHP, SCSS, and JS

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Copy link
Copy Markdown
Collaborator Author

Superseded by #224, #225, and #226, all merged to develop.

mlaetitia closed this Aug 24, 2026
mlaetitia reopened this Aug 26, 2026
mlaetitia and others added 10 commits August 26, 2026 19:53
…eader inset, brand-green accents, mobile design specs with a full-screen accordion menu, featured card text/link fields, and a Get Involved CTA

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
(cherry picked from commit f87f4d3)
… them at hardcoded offsets

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
(cherry picked from commit 37755ac)
… rename the expanded-section background to the Color naming convention

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
(cherry picked from commit bd98ba2)
…ucent panels) and move the header divider line to the open-state veil so it never flickers

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
(cherry picked from commit 58a3170)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
(cherry picked from commit de99af5)
…u's settings, keeping Get Involved as the fallback

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
(cherry picked from commit 1070867)
…ack to a hardcoded link

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
(cherry picked from commit 21b363f)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
(cherry picked from commit 95e255e)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
(cherry picked from commit 21fb84a)
…nd rebuild the generated CSS

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01X94V2vAqzynRRcqP4Jji2U
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant


Back | FazBrowse Home | New Git URL