Ronan Corr

Built an accessible mega menu system inspired by Mary Schieferstein's Flexbox Priority Navigation's tutorial., and extended it with dynamic, role-based content and enhanced usability.

Key Features:

1. Dynamic Menu Population:
   Menu items are loaded from a JSON file, allowing for an unlimited number of items. Items are prioritized based on available screen space—visible items are displayed in the main navigation, while overflow items are tucked into a hamburger menu.
2. Multi-Level Submenus:
   Each menu item can contain an unlimited number of sub-items. Submenus support two layouts:
   • Photo-Based Mega Menu
     
     
   • Category-Based Mega Menu (grouped links)
     Submenus are scrollable and constrained to a maximum height of 90vh for accessibility and usability.
     
     
3. User-Based Menu Display:
   Menu items adjust based on the logged-in user’s userType property. Each user sees a different set of navigation items.
4. Accessibility Highlights:
   
   • Fully navigable via keyboard and screen reader.
   • ARIA roles and attributes implemented for semantic clarity.
   • Keyboard Commands:
     • TAB / SHIFT + TAB: Navigate through menu items
     • ENTER: Activate links or toggle dropdowns
     • ESC: Close open submenus
   • Only one submenu remains open at a time for improved focus management.
5. User Personalization:
   Logged-in users can select from 12 custom color themes to personalize the menu interface.
6. Demo Access:
   Try different views by logging in as:
   • user1 / pw123
   • user2 / pw123
   • user3 / pw123