AMegMen

AMegMen (Accessible MegaMenu) is an Keyboard accessible, jQuery-free and Framework-free MegaMenu plugin which is fully responsive, and supports multiple levels.

Demo

https://adityakahb.github.io/amegmen

Features

- Available in Vanilla Javascript and CommonJS module
- Framework-free
- Can be navigated through Tab Key
- Supports 3 levels
- Supports Click and Hover behaviors
- Supports Right to Left UI
- Fully responsive
- With bare minimum css (with no icons, reset, normalize, custom fonts or images)
- Can have multiple instances with multiple configurations
- Compiled through Typescript
- Styled through SASS (Mobile first and with one breakpoint) - Source included for customization
- Tested through Karma and Jasmine
- Polyfills for Object.assign, querySelector:scope, querySelectorAll:scope and Element.closest included, no other polyfill required.

Development Points

Since AMegMen supports 3 levels, following points are considered during the development:
- Levels start from 0, just like an array.
- 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
- All Subnav panels must have columns in them, to position the 3rd level accurately.
- Mobile devices don't support hover, so the hover behavior is implemented as an option, which if required, can be enabled by passing actOnHover as true.
- Right to Left is based on just a CSS property direction: rtl, and it may not be supported on old browsers.
- Actual code resides in Typescript, which is compiled to Javascript (ES3 and NO Module code generation) and is compressed through Uglify-JS.
- Styles reside in SASS files with minimum configurations and changes mobile to desktop view at 768px. The styles are compressed through UglifyCSS.

Installation

$3

``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`

$3

MIT