AMegMen (Accessible MegaMenu) is an Keyboard accessible, jQuery-free and Framework-free MegaMenu plugin which is fully responsive, and supports multiple levels.
npm install amegmenObject.assign, querySelector:scope, querySelectorAll:scope and Element.closest included, no other polyfill required.
Root -> Level 0 UL/LI -> Level 0 Anchor and Level 0 Subnav Panel
Level 0 Subnav Panel -> Level 0 Landing link and Level 1 Panel Columns
Level 1 Panel Columns -> Level 1 UL/LI -> Level 1 Anchor and Level 2 Subnav Panel
Level 2 Subnav Panel -> Level 1 Landing link and Level 2 a Single Panel Column
Level 2 Panel Column -> Level 2 UL/LI -> Level 2 Anchor
actOnHover as true.
direction: rtl, and it may not be supported on old browsers.
bash
npm install amegmen
`
THEN
`html
`
OR
`javascript
import AMegMen from 'amegmen';
`
`sass
@import '~amegmen\src\sass-theme-1\amegmen';
`
$3
`html
`
$3
`javascript
var amegmen_instance = AMegMen.Root.getInstance();
var amegmen_options = {};
amegmen_instance.init("#__amegmen_root", amegmen_options);
/ You can destroy it as well /
amegmen_instance.destroy("#__amegmen_root");
`
$3
activeCls - CSS Class
Default: active
Associated with the root element and its children which get a subnav panel opened or activated
actOnHover - Boolean
Default: false
Toggles Hover behavior on or after the breakpoint specified by actOnHoverAt
actOnHoverAt - Number
Default: 1280
If actOnHover is enabled, Hover behaviour will be activated on or after this breakpoint.
backBtnCls - CSS Class
Default: __amegmen--back-cta
Associated with the Level 2 Buttons on mobile, which navigates to the Level 1 Menu.
closeBtnCls - CSS Class
Default: __amegmen--close-cta
Associated with the Button on mobile, which closes the Megamenu.
colCls - CSS Class
Default: __amegmen--col
Associated with the Columns on Panels at Level 1 and level 2.
focusCls - CSS Class
Default: focus
Triggered when focus event is fired on related elements.
hoverCls - CSS Class
Default: hover
Triggered when hover event is fired on related elements.
idPrefix - String
Default: __amegmen_id
Some elements need an id associated with them for behavior calculation. This is a prefix string for those IDs.
isRTL - Boolean
Default: false
Changes the direction of the Megamenu to Right to Left. Caution: It uses CSS property direction: rtl
l0AnchorCls - CSS Class
Default: __amegmen--anchor-l0
Associated with the links at Level 0
l0PanelCls - CSS Class
Default: __amegmen--panel-l0
Associated with the Subnav Panel at Level 0
l1ActiveCls - CSS Class
Default: __amegmen--l1-active
Associated when the Subnav Panel at Level 0 is active
l1AnchorCls - CSS Class
Default: __amegmen--anchor-l1
Associated with the links at Level 1
l1PanelCls - CSS Class
Default: __amegmen--panel-l1
Associated with the Subnav Panel at Level 1
l2ActiveCls - CSS Class
Default: __amegmen--l2-active
Associated when the Subnav Panel at Level 1 is active
l2AnchorCls - CSS Class
Default: __amegmen--anchor-l2
Associated with the links at Level 2
landingCtaCls - CSS Class
Default: __amegmen--landing
Associated with the containers at Level 1 and 2 which contain links to parent links at Level 0 and Level 1 respectively
lastcolCls - CSS Class
Default: __amegmen--col-last
Associated with the last column at Level 1
mainBtnCls - CSS Class
Default: __amegmen--main-cta
Associated with the Level 1 Buttons on mobile, which navigates to the Level 0 Menu.
mainElementCls - CSS Class
Default: __amegmen--main
Associated with the Level 0 main section which contains Level 0 anchors
offcanvasCls - CSS Class
Default: __amegmen--canvas
Associated with scrollable elements which the scrolling needs to be disabled
overflowHiddenCls - CSS Class
Default: __amegmen--nooverflow
Associated with scrollable elements which the scrolling needs to be disabled
panelCls - CSS Class
Default: __amegmen--panel
Associated with the Subnav Panels at Level 1 and Level 2
rootCls - CSS Class
Default: __amegmen
Associated with the Root Element
rtl_Cls - CSS Class
Default: __amegmen--r-to-l
Associated with the Root Element, if isRTL is enabled
supportedCols - Number
Default: 4
Maximum number of columns associated with Level 1 Subnav Panel
toggleBtnCls - CSS Class
Default: __amegmen--toggle-cta
Associated with the Button on mobile, which toggles the Megamenu specified by offcanvasCls
$3
init
Parameters: CSS Selector
The Root element id or class to be passed to initialize the Megamenu. Example #root, .root
destroy
Parameters: CSS Selector
The Root element id or class to be passed to destroy the Megamenu. Example #root, .root`