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

License

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