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 */ } |
License
This project is licensed under the MIT License © 2018-present Jakub Biesiada