menu-breaker.js
About
Demo
How to Install
First, install the library in your project by npm:
$ npm install menu-breakerOr Yarn:
$ yarn add menu-breakerYou 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 jqueryconst 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