SlideMenu.js

Easy off-canvas menu with mobile touch support.

Table of Contents

Demo

Check out the demo to see it in action (on your mobile or emulate touches on your browser).

SlideMenu.js demo

Installation

Download SlideMenu.js and SlideMenu.css from releases, include them in <head> by entering following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="SlideMenu.js"></script>
<link rel="stylesheet" href="SlideMenu.css">

Also, before including SlideMenu.js you need include jQuery.

Usage

<html>
    <head>
        <link rel="stylesheet" href="SlideMenu.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="SlideMenu.js"></script>
    </head>
    <body id="site-wrapper">
        <div id="site-canvas">
            <div id="site-menu">
                <h2>Example menu</h1>
                <div>item 1</div>
                <div>item 2</div>
                <div>item 3</div>
                <div>item 4</div>
                <div>item 5</div>
            </div>

            <!--Any other content-->
            <h1>SlideMenu.js</h1>
            <a href="#" id="logo"><span>Menu</span></a>
        </div>

    </body>
    <script>
        var sm;
        $(document).ready(function () {
            sm = new SlideMenu(window.jQuery || window.$, {
                'debug': true 
            });
        });
    </script>
</html>

Browser Support

Tested on:

API

SlideMenu(options)

Create a new instance of SlideMenu

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.

sm.openMenu();

SlideMenu.closeMenu();

Closes the menu. It emits menuClose and menuCloseEnded events.

sm.closeMenu();

SlideMenu.toggleMenu();

Toggles (open/close) the menu. It emits menuToggle and menuToggleEnded events.

sm.toggleMenu();

SlideMenu._isMenuOpened();

Returns true if the menu is currently open, and false if it is closed.

sm._isMenuOpened(); // true or false

Events

An instance of SlideMenu emits the following events:

With :heart: by

License

This project is licensed under the MIT License - see the LICENSE file for details