Overview
We've developed a super handy JavaScript API for Meteor Mega Menus, so you can make frontend changes to mega menus quickly and easily. You'll find a list of useful events and functions below:
JS events
meteor:ready
When scripts are loaded and ready to be used.
Our scripts are loaded async so be sure to define event listeners prior the including the meteor-menu.liquid snippet.
document.addEventListener('meteor:ready', function() {
console.log(MeteorMenu);
});meteor:show
When any mega menu is displayed.
Event bubbles, so you can attach to document and get event.target to get the mega menus.
document.addEventListener('meteor:show', function(e) {
var $menu = e.target;
// Do any operations on element...
});meteor:hide
When any mega menu is hidden.
Event bubbles, so you can attach to document and get event.target to get the mega menus.
document.addEventListener('meteor:hide', function(e) {
var $menu = e.target;
// Do any operations on element...
});meteor:beforeFit
Before a mega menu is fitted to the width of the viewport.
Event bubbles, so you can attach to document and get event.target to get the mega menus.
document.addEventListener('meteor:beforeFit', function(e) {
var $menu = e.target;
// Do any operations on element...
});meteor:afterFit
After a mega menu is fitted to the width of the viewport.
Event bubbles, so you can attach to document and get event.target to get the mega menus.
document.addEventListener('meteor:afterFit', function(e) {
var $menu = e.target;
// Do any operations on element...
});JS API
Meteor ships with a basic API to manage mega menus on the fly.
Global Object
MeteorMenu.api.getMenu( id )
Get an attached mega menu by the internal ID. The ID of a mega menu can be discovered in MeteorMenu.menus. Returns a Menu instance. Read below for available properties and methods.
MeteorMenu.api.realign
Align all mega menus based on the vertical/horizontal stack of items. Link lists that are detected as stacked will by default always show a mobile-style menu regardless of width. Use this method if you change the arrangement of link lists dynamically. This gets called upon any page load or resize.
MeteorMenu.api.fit
Fits mega menus within the viewport of the browser. There may be situations where Meteor isn’t aware of a layout change and this needs to be recalculated.
MeteorMenu.api.attach
Attaches all mega menus to links/buttons. Executed on any page load by default and 3 additional checks after page load. Use this method if you add a link/button after the page has loaded.
MeteorMenu.api.detach
Detaches all mega menus from links/buttons.
MeteorMenu.api.showAll
Force shows all mega menus and keeps them open. Helpful for styling / debugging.
MeteorMenu.api.hideAll
Force hides all mega menus.
MeteorMenu.api.debugMode
Enables debug mode for console logging. Pass false as the first parameter to disable.
Menu Object
Menu.id
The internal unique ID for that mega menu.
Menu.show - function
Show the most visible mega menu element.
MeteorMenu.api.getMenu(1234).show();
Menu.hide - function
Hide any visible mega menu elements.
MeteorMenu.api.getMenu(1234).hide();
Menu.forceShow( show ) - function
Force show/hide a mega menu. The menu won’t be closed upon mouse action. Pass false to hide.
MeteorMenu.api.getMenu(1234).forceShow(true);
Menu.remove - function
Removes all mega menu elements from the DOM.
Menu.templateHandle
The template being used to render the mega menu.
Menu.$buttons
An array of button elements the mega menu is currently attached to.
Menu.$menus
An array of mega menu elements that have been rendered.
Menu.data
Data attached to a mega menu, including information, links, and settings.