Menu-breaker NPM

menu-breaker.js

About

Demo

How to Install

First, install the library in your project by npm:

$ npm install menu-breaker

Or Yarn:

$ yarn add menu-breaker

You can also connect script via one of CDNs: bundle.run: https://bundle.run/menu-breaker jsDelivr: https://cdn.jsdelivr.net/npm/menu-breaker/ unpkg: https://unpkg.com/menu-breaker/

Getting Started

Connect libary with project using script tag in HTML:

<script src="/path/to/menu-breaker.js"></script>

ES6 import:

import MenuBreaker from 'menu-breaker';

Or CommonJS:

const MenuBreaker = require('menu-breaker');

Next use library with:

• Vanilla JavaScript e.g:

const elem = document.querySelector('.desktop');

const menuBreaker = new MenuBreaker({
  element: elem,
  settings: {
    // options...
  },
  callbacks: {
    // callbacks...
  }
});

• or jQuery e.g:

Connect jQuery in HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

or include via command line and CommonJS

$ npm install jquery
$ yarn add jquery
$ bower install jquery

const jQuery = require('jquery');

and call plugin on element

$('.desktop').menuBreaker({
  settings: {
    // options...
  },
  callbacks: {
    // callbacks...
  }
});

Options

Settings

Name	Type	Default	Description	Available options
navbar-height	number	`70`	Desktop menu height	e.g: `50`, `86`, etc.
open-class	string	`open`	Name of the class added to the mobile menu after clicking `open` or `open-close` element	Name of class

Callbacks

Name	Description	Available options
onInit	Callback on plugin init	`() => { /* code */ }`
onMenuOpen	Callback on mobile menu open	`() => { /* code */ }`
onMenuClose	Callback on mobile menu close	`() => { /* code */ }`
isMobile	Callback when is mobile menu	`() => { /* code */ }`
isDesktop	Callback when is desktop menu	`() => { /* code */ }`