jQuery pushMenu (jQuery.pushMenu.js)

v2.0.8

pushMenu is based on Manoela llic's Multi Level Push Menu, but implemented with jQuery.

Features

• Multiple level menu support
• Infinite menu level nesting
• Cross browser compatibility (IE9+, Chrome, Firefox, Safari, Opera, Android Browser, iOS Safari)

Usage

Getting started

Grab the code

Bower

bower install --save push-menu

Node

npm install push-menu --save

Include the CSS

<link rel="stylesheet" href="dist/css/stylesheet.css" />

There is also a SCSS file available inside the source

Include the Javascript

<script src="dist/js/jquery.pushMenu.min.js"></script>

Setting up the html

<div class="site">
    <div class="site-outer">
        <nav class="mp-menu mp-cover" id="mp-menu">
            <div class="mp-level">
                <ul>
                    <li><a title="CLOSE X" href="javascript:;" class="mp-back">CLOSE X</a></li>
                    <li><a title="" href="/">Home</a></li>
                    <li><a title="" href="">Menu item 1</a></li>
                    <li><a title="Menu item 2" href="javascript:;">Menu item 2 ></a>
                        <div class="mp-level">
                            <a href="javascript:;" class="mp-back">BACK</a>
                        <strong>Menu item 2</strong>
                            <ul class="sub-menu third-level">
                                <li><a title="" href="">Menu item 2.1</a></li>
                                <li><a title="" href="">Menu item 2.2</a></li>
                                <li><a title="" href="">Menu item 2.3</a></li>
                                <li><a title="" href="">Menu item 2.4</a></li>
                                <li><a title="" href="">Menu item 2.5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a title="" href="">Menu item 3</a></li>
                    <li><a title="" href="">Menu item 4</a></li>
                    <li>

                        <a title="Menu item 5" href="javascript:;">Menu item 5 ></a>

                        <div class="mp-level">
                            <a href="javascript:;" class="mp-back">BACK</a>
                            <strong>Menu item 5</strong>
                            <ul class="sub-menu third-level">
                                <li><a title="" href="">Menu item 5.1</a></li>
                                <li><a title="" href="">Menu item 5.2</a></li>
                                <li>
                                    <a title="Menu item 5.3" href="javascript:;">Menu item 5.3 ></a>
                                    <div class="mp-level">
                                    <a href="javascript:;" class="mp-back">BACK</a>
                                    <strong>Menu item 5.3</strong>
                                        <ul class="sub-menu third-level">
                                            <li><a title="" href="">Menu item 5.3.1</a></li>
                                            <li><a title="" href="">Menu item 5.3.2</a></li>
                                            <li><a title="" href="">Menu item 5.3.3 ></a></li>
                                            <li><a title="" href="">Menu item 5.3.4</a></li>
                                            <li><a title="" href="javascript:;">Menu item 5.3.5 ></a>

                                                <div class="mp-level">
                                                    <a href="javascript:;" class="mp-back">BACK</a>
                                                    <strong>Menu item 5.3.5</strong>
                                                    <ul class="sub-menu third-level">
                                                        <li><a title="" href="">Menu item 5.3.5.1</a></li>
                                                        <li><a title="" href="">Menu item 5.3.5.2</a></li>
                                                    </ul>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </li>                                        
                                <li><a title="" href="">Menu item 5.4</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="site-wrapper">
            <div class="site-container">
                <h1><a href="javascript:;" id="trigger" class="burger" title="Open"></a> jquery pushMenu v2.0.7</h1>

                <h2>Site content</h2>

            </div>
        </div>
    </div>
</div>

Setting up the Javascript

<script>
    
    $(document).ready(function(){
        $('#mp-menu').pushMenu({
            type: 'overlap',
            levelSpacing: 0,
            backClass: 'mp-back',
            trigger: '#trigger',
            pusher: '.site-outer',
            scrollTop: false
        });
    });
</script>

Options

type: 'cover'                       // cover || overlap     -   Whether the menu level should overlap slightly or completely cover each other
levelSpacing: 0                     // If the 'type' is set to overlap how much should be visible from the previous level
backClass: 'mp-back'                // The back button class
trigger: '#trigger'                 // What should open the menu on click / touch
pusher: '.site-outer'               // What should be moved when the menu opens - The plugin relies on moving the site out of the way to make way for the menu
scrollTop: false                    // true || false    -   If set to true when moving between levels the screen will automatically scroll back to the top

Todos

• Add some additional examples
• IE8 to play nicely
• Option to slide menu in from the right
• Main content of the site should be fixed to the page when menu is open and not scroll with the menu
• Add callback for onOpen
• Add callback for onClose
• Add method to open menu programmatically at a specific level
• Add method to close menu
• Add option to choose whether to close menu on body click
• Add option if level has an arbitrary active class menu opens at this level again