@borngroup/born-megamenu v4.0.0

BORN Megamenu

Allows to create mega menu functionality, featuring events, callbacks, and accessibility settings.

Options and Callbacks

menuSelector: String Selector for the menu/navigation container.

triggerSelector: String Selector for the menu's triggers, i.e. the elements that you click or action on to open further navigation containers.

targetSelector: String Selector for the trigger's target container, i.e. the container that should appear after actioning on a trigger.

events: String Default: 'touchstart click mouseenter'. List of events the 'trigger' should listen to. Add a space between each event to specify more than one.

keyBindings: Array Default: 13 (Enter key). Array of keyboard keyCodes to listen to when a navigation trigger is focused. Either the "keydown" or "keyup" events must be set on the events property.

waitForTransition: Object | Boolean Object containing selector and property values to determine if the Menu should be activated after a transition period is completed. Set to false to activate the Menu immediately after a trigger is actioned on.

waitForTransition.selector: String Default: targetSelector's value. Waits until the transition property specified in waitForTransition.property finishes on the matched waitForTransition.selector before setting the Menu as active. waitForTransition.property: String

clickThroughSelector: String By default, Megamenu cancels (evt.preventDefault) link following on anchor tags that are also 'triggers'. You can specify a class name to force Megamenu to follow the link on click. Note: touch taps on anchor triggers will always be cancelled.

unsetSiblingsSelector: String When an element matching this selector is triggered, unset all of the element's relative (same level) menu items.

unsetOnMouseleave: Boolean Default: true. Unsets the Menu after hovering out of it. Set to false to keep Menu active.

unsetOnClickOut: Boolean Default: false. Unsets the Menu after clicking out of it.

hoverDelay: Integer Default: 0. When hovering, set a wait time (in milliseconds) before setting the 'trigger' and 'target' as active after hovering out of it.

reInitOnBreakpointChange: Boolean Default: false. Re-initializes MegaMenu when entering different configured breakpoints. Defaults to false cause generally this is not something that is necessary, however this feature can be useful when different breakpoints contain distinct sets of events, callbacks, and 'trigger' selectors.

responsive: Object Specify settings for specific breakpoints. This is great for when you need different viewports to have different functionality.

Parameters:
breakpoint: Integet Number referencing the max-width these 'settings' will apply to.
settings: Object Specify settings in the form of key: value. All options and callbacks available on Megamenu can be applied here.

afterMenuSet: function Runs every time the menu is initially set.

afterMenuUnset: function Runs every time the menu is closed (unset).

beforeTriggerSet: function Runs every time a 'trigger' is actioned on (set).

afterTriggerUnset: function Runs every time a 'trigger' is unset, i.e. before a relative trigger is set.

Extras

–You can add the 'data-menu-close' attribute to an element inside a navigation 'target' container if you need to have a way to close (unset) the current navigation. This is specially useful on touch devices.
–Also on touch devices, tapping on an active (set) 'trigger' will cause the same 'trigger' to be closed (unset).

Usage

var myMenu = new Megamenu({
    menuSelector: '.navigation',
    triggerSelector: '.navigation__trigger',
    targetSelector: '.navigation__target',
    clickThroughSelector: '.lvl1-anchor',
    unsetSiblingsSelector: '.no-submenu',
    hoverDelay: 150,
    afterMenuSet: function(trigger) { ... },
    responsive: [
        {
            breakpoint: 767,
            settings: {
                events: 'click',
                unsetOnMouseleave: false,
                clickThroughSelector: false
            }
        }
    ]
});