🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

JavaScript & jQuery plugin to switch between mobile and desktop menu and change submenus side on browser window resize.

Menus Plugins

Documentation

menu-breaker.js

NPM version NPM downloads

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


You May Also Like