Demo
Initial setup
Paste below HTML structure at your code where you want mega menu to appear. Any ID or classname is fine. Call the menu component from Wrapper library
<div id='mega_menu_container'></div>
Configuration
All sort of customization need to be passed as an Object. Mega menu settings can be customized by altering few attributes like
| Key name | Type | Value |
|---|---|---|
| id | String | It's a required attribute and necessary to follow accessibility guideline. This should be unique |
| content | Object | It's a required contentful key and contains following keys
|
| menuList | Array of Objects | It's a required key and holds menu list information. This key has following inner keys
|
var megaMenuOption = {
id: 'menu_1',
content: {
mainMenuLabelSRText: 'Mega menu demo',
mobileMenuBtnText: 'Open Mobile menu',
mobileBackBtnText: 'Back',
mobileHomeBtnText: 'Home'
},
menuList: [
{
name: 'Multilevel mega menu',
link: '#',
type: 'multi',
subMenu: [
{
name: '1.1 Flyout link',
link: '#',
subMenu: [
{
name: '1.1.1 Page link',
link: '#'
},
{
name: '1.1.2 Flyout link',
link: '#',
subMenu: [
{
name: '1.1.2.1 Page link',
link: '#'
},
{
name: '1.1.2.2 Page link',
link: '#'
}
]
},
{
name: '1.1.3 Page link',
link: '#'
}
]
},
{
name: '1.2 Flyout link',
link: '#',
subMenu: [
{
name: '1.2.1 Page link',
link: '#'
},
{
name: '1.2.2 Page link',
link: '#'
}
]
},
{
name: '1.3 Flyout link',
link: '#',
subMenu: [
{
name: '1.3.1 Page link',
link: '#'
},
{
name: '1.3.2 Page link',
link: '#'
}
]
},
{
name: '1.4 Page link',
link: '#'
}
]
},
{
name: 'Flat mega menu (3 cols)',
link: '#',
type: 'cols',
subMenu: [
{
name: '2.1 Page link Header',
link: '#',
subMenu: [
{
name: '2.1.1 Page link',
link: '#'
},
{
name: '2.1.2 Page link',
link: '#'
},
{
name: '2.1.3 Page link',
link: '#'
}
]
},
{
name: '2.2 Page link Header',
link: '#',
subMenu: [
{
name: '2.2.1 Page link',
link: '#'
},
{
name: '2.2.2 Page link',
link: '#'
},
{
name: '2.2.3 Page link',
link: '#'
}
]
},
{
name: '2.3 Page link Header',
link: '#',
subMenu: [
{
name: '2.3.1 Page link',
link: '#'
},
{
name: '2.3.2 Page link',
link: '#'
}
]
}
]
},
{
name: 'Flat mega menu (2 cols)',
link: '#',
type: 'cols',
subMenu: [
{
name: '3.1 Page link Header',
link: '#',
subMenu: [
{
name: '3.1.1 Page link Header',
link: '#',
shortDesc: 'Short description of link'
},
{
name: '3.1.2 Page link Header',
link: '#',
shortDesc: 'Short description of link'
},
{
name: '3.1.3 Page link Header',
link: '#',
shortDesc: 'Short description of link'
}
]
},
{
name: '3.2 Page link Header',
link: 'no-link',
longDesc: "This is just static content. You can add anything here. Images, text, buttons, your grandma's secrect recipe."
}
]
},
{
name: 'Static link',
link: '#'
}
]
};
window.addEventListener('load', function () {
window.A11yWrapper('#mega_menu_container').megamenu(megaMenuOption);
});
How to use Mega menu component multiple times
Mega Menu can be positioned in multiple places while initiating the library. Also, multiple Menus can have different configurations as well. Below two ways, Menu can be called several times.
-
Using multiple ID.
Call wrapper class multiple times for each distinctive ID.
var megaMenuOption1 = {...}, megaMenuOption2 = {...}; window.addEventListener('load', function () { window.A11yWrapper('#mega_menu_container1').megamenu(megaMenuOption1); window.A11yWrapper('#mega_menu_container2').megamenu(megaMenuOption2); }); -
Using same class for multiple elements.
In below example, configuration object will be assigned sequentially. First object will be assigned to the first Mega Menu and second object will be assigned to the second Mega Menu. If only one configuration object is passed then both Mega Menus will be built upon that single configuration object.
var megaMenuOption1 = {...}, megaMenuOption2 = {...}; window.addEventListener('load', function () { window.A11yWrapper('.mega-menu-container').megamenu(megaMenuOption1, megaMenuOption2); });
Accessibility
Keyboard interaction for Top level menu
- TAB/ SHIFT + TAB - TAB- Select the next focusable element. SHIFT + TAB- select previous focusable element.
- RIGHT/ LEFT - RIGHT - Select next menu item . LEFT - Select previous menu item.
- DOWN - Open the submenu level if exist and focus on first item.
- UP - Open the submenu level if exist and focus on the last item.
Keyboard interaction for Sub level menu
- TAB/ SHIFT + TAB - Close the submenu. TAB- Select the next focusable item from Top menu. SHIFT + TAB- select previous focusable item from Top menu.
- RIGHT/ LEFT - Close the submenu. RIGHT - Select next item from Top menu and if next Top Menu contains submenu then submenu get extended and first item receive focus. LEFT - Select previous item from Top menu and if previous Top Menu contains submenu then submenu get extended and first item receive focus.
- ENTER/ SPACE/ DOWN - Open the submenu level if exist and focus on first item.
- UP/ DOWN - DOWN - Move focus to next sub menu item. UP - Move focus to previous sub menu item.
- ESC - Close sub menu and select the current Top menu item.