Overview

We've developed a super handy JS 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:

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...
});

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 properies 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 up 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 visibile 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 mega menu, including information, links, and settings.

Did this answer your question?