https://github.com/alexkratky/slidemenu.js
Easy off-canvas menu with mobile touch support.
https://github.com/alexkratky/slidemenu.js
canvas-menu javascript js menu menu-navigation mobile-touch offcanvas sidebar slide-menu slide-menu-js touch touch-events
Last synced: about 1 month ago
JSON representation
Easy off-canvas menu with mobile touch support.
- Host: GitHub
- URL: https://github.com/alexkratky/slidemenu.js
- Owner: AlexKratky
- License: mit
- Created: 2018-12-29T16:37:37.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-01-27T10:09:32.000Z (over 6 years ago)
- Last Synced: 2025-02-01T19:45:07.332Z (3 months ago)
- Topics: canvas-menu, javascript, js, menu, menu-navigation, mobile-touch, offcanvas, sidebar, slide-menu, slide-menu-js, touch, touch-events
- Language: JavaScript
- Homepage: https://slidemenu.js.org/
- Size: 23.4 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SlideMenu.js
> Easy off-canvas menu with mobile touch support.
**Table of Contents**
- [SlideMenu.js demo](#demo)
- [Installing SlideMenu.js](#installation)
- [Using SlideMenu.js](#usage)
- [Browser Support](#browser-support)
- [API](#api)
- [SlideMenu.js options](#slidemenu-options-)
- [SlideMenu.js events](#events)
- [Author](#with-heart-by)
- [License](#license)
## Demo
[Check out the demo](https://alexkratky.github.io/SlideMenu.js/example.html) to see it in action (on your mobile or emulate touches on your browser).
## Installation
Download SlideMenu.js and SlideMenu.css from [releases](https://github.com/AlexKratky/SlideMenu.js/releases), include them in `` by entering following code:
```html
```
Also, before including SlideMenu.js you need include jQuery.
## Usage
```html
var sm;
$(document).ready(function () {
sm = new SlideMenu({
'debug': true
});
});
```
## Browser Support
Tested on:
- Chrome (Android, desktop)
- MS Edge (desktop)
## API
### SlideMenu(options)
Create a new instance of SlideMenu
* `options` (Object) - Options to customize a new instance of SlideMenu.
* [`options.container`] (HTMLElement) - The DOM element that will have touch listeners. Default: `body`.
* [`options.wrapper`] (HTMLElement) - The outer DOM element that contains `option.canvas`. It could be the same element as `options.container`. Default: `#site-wrapper`.
* [`options.canvas`] (HTMLElement) - The DOM element that contains all your application content. Default `#site-canvas`.
* [`options.button`] (HTMLElement) - The DOM element that will have toggle function. Default `#logo`.
* [`options.percent`] (Number) - Specifies the minimum size (in percent) to open the menu. Enter number in interval <0,1>. Default: `0.25`.
* [`options.area`] (Number) - Specifies the size (in percent) of touch area from the left of the container. Enter number in interval <0,1>. Default: `0.1`.
* [`options.debug`] (Boolean) - Sets the application output via a console. Default: `false`.
* [`options.closeMenuOnWidth`] (Number|Boolean) - Closes the menu when the window width is greater than this value. When setting `false`, the menu will not close at any value. Default: `false`.
* [`options.disableMenuOnWidth`] (Number|Boolean) - Disable touch events when the window width is greater than this value. When setting `false`, the touch events will be available at any window width. Default: `false`.
* [`options.size`] (Number) - The menus size. Default: `300`.
* [`options.animationTime`] (Number) - The menus animation time in milliseconds. Default: `300`.
```js
var sm = new SlideMenu({
'container': document.querySelector('body'),
'wrapper': document.getElementById('site-wrapper'),
'canvas': document.getElementById('site-canvas'),
'button': document.getElementById('logo'),
'percent': 0.25,
'area': 0.1,
'debug': 'false',
'closeMenuOnWidth': false,
'disableMenuOnWidth': false,
'size': 300,
'animationTime': 300
});
```
### SlideMenu.openMenu();
Opens the menu. It emits `menuOpen` and `menuOpenEnded` events.
```js
sm.openMenu();
```
### SlideMenu.closeMenu();
Closes the menu. It emits `menuClose` and `menuCloseEnded` events.
```js
sm.closeMenu();
```
### SlideMenu.toggleMenu();
Toggles (open/close) the menu. It emits `menuToggle` and `menuToggleEnded` events.
```js
sm.toggleMenu();
```
### SlideMenu.isMenuOpened();
Returns true if the menu is currently open, and false if it is closed.
```js
sm.isMenuOpened(); // true or false
```
## Events
An instance of SlideMenu emits the following events:
* `menuOpen`
* `menuClose`
* `menuOpenEnded`
* `menuCloseEnded`
* `menuNotEnough` - When the menu does not close or open after touch end.
* `menuToggle`
* `menuToggleEnded`
* `touchStarted`
* `touchMoved`
* `touchEnded`
## With :heart: by
- Alex Krátký
- E-mail: [[email protected]]([email protected])
- Web: [https://alexkratky.cz/](https://alexkratky.cz)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details