About This Demo
This page has two independent site menus on the
same page: a primary header navigation and a footer navigation.
Each fixSiteMenu() call creates its own trigger button
and overlay menu with a distinct label. This demonstrates that
multiple instances can coexist without conflict.
1. Primary Header Navigation
⚠ Mouse Only2. Footer Navigation
⚠ No Keyboard AccessPortal Component Fixes Code
Two separate fixSiteMenu() calls with different selectors and labels. The footer menu uses overrideMenuItems because its layout is a multi-column grid, not a standard <ul> hierarchy.
// Primary header navigation (automatic extraction)
fixSiteMenu('#demo-nav-primary')
.menuLabel('Main Menu')
// Footer navigation (custom extraction for multi-column layout)
fixSiteMenu('#demo-nav-footer')
.menuLabel('Footer Menu')
.overrideMenuItems(function() {
var menuItems = [];
var footerNav = document.querySelector('#demo-nav-footer');
if (!footerNav) return menuItems;
footerNav.querySelectorAll('.footer-nav-columns > div').forEach(function(column) {
var heading = column.querySelector('h3');
if (!heading) return;
var children = [];
column.querySelectorAll('ul > li > a').forEach(function(link) {
if (link.textContent && link.textContent.trim()) {
children.push({
label: link.textContent.trim(),
href: link.getAttribute('href') || '#',
level: 2,
children: []
});
}
});
menuItems.push({
label: heading.textContent.trim(),
href: '#',
level: 1,
children: children
});
});
return menuItems;
})
How to Test (after AE JS is loaded)
- Press Tab to find two separate trigger buttons: "Main Menu" and "Footer Menu".
- Open "Main Menu" — it shows the header navigation items (Home, Products, Solutions, Pricing, Contact).
- Close the main menu, then Tab to and open "Footer Menu" — it shows footer categories (Company, Resources, Support, Legal) with their sub-links.
- Both menus operate independently. Opening one does not affect the other. Each has its own Alt+M behavior (toggles the most recently opened menu).