menu-breaker.js

About

Demo

See plugin in action

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.5.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 */ }

License

This project is licensed under the MIT License © 2018-present Jakub Biesiada