JavaScript API

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.

Still puzzling over something?

Custom CSS

Supported themes

Liquid files

Duplicate your theme

Display images for 'Page' menu items