Mobile-Friendly Sliding Mega Menu with CSS and jQuery – MA5 Menu

Yet another mega menu plugin that is especially designed for mobile devices with cool sliding forward and back animations. The plugin creates mobile-friendly, off-canvas, sliding mega menu with having option to open from left or right.

Plugin Overview

Plugin: MA5 Mobile Menu
Author: MA5
Licence: MIT Licence
Published: April 5, 2019
Repository: Fork on GitHub
Dependencies: jQuery 3.3.1 or Later
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 173 KB

How to Use Sliding Mega Menu :

1. To getting started with MA5 Menu , first of all load the jQuery and plugin’s CSS and JavaScript file into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- ma5menu CSS -->
<link rel="stylesheet" href="css/ma5-menu.min.css">

<!-- ma5menu JS -->
<script src="js/ma5-menu.min.js"></script>

2. Create a button element with the following class that will be used to toggle the menu.

<!-- Button to Toggle Menu -->
<button class="ma5menu__toggle" type="button">
<span class="ma5menu__icon-toggle"></span><span class="ma5menu__sr-only">Menu</span>
</button>

3. Create Menu structure like below.

    <ul class="site-menu">
            <li>
                <a href="index-page.html">Shop</a>
                <ul>
                    <li><a href="index-page.html">Products</a></li>
                    <li>
                        <a href="index-page.html">Collections</a>
                        <ul>
                            <li><a href="index-page.html">Premium</a></li>
                            <li><a href="index-page.html">Common</a></li>
                            <li>
                                <a href="index-page.html">Exclusive</a>
                                <ul>
                                    <li><a href="index-page.html">First</a></li>
                                    <li><a href="index-page.html">Secound</a></li>
                                </ul>
                            </li>
                            <li><a href="index-page.html">Other</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="index-page.html">Accesories</a>
                        <ul>
                            <li><a href="index-page.html">Small</a></li>
                            <li><a href="index-page.html">Medium</a></li>
                            <li><a href="index-page.html">Large</a></li>
                        </ul>
                    </li>
                    <li><a href="index-page.html">Cards</a></li>
                    <li>
                        <a href="index-page.html">Sets</a>
                        <ul>
                            <li><a href="index-page.html">Example 1</a></li>
                            <li><a href="index-page.html">Example 2</a></li>
                            <li><a href="index-page.html">Example 3</a></li>
                            <li class="active"><a href="index-page.html"><b>Example 4</b></a></li>
                            <li><a href="index-page.html">Example 5</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="index-page.html">Lookbook</a>
                <ul>
                    <li><a href="index-page.html">For business</a></li>
                    <li><a href="index-page.html">Premium Area</a></li>
                </ul>
            </li>
            <li>
                <a href="index-page.html">Campaigns</a>
                <ul>
                    <li>
                        <a href="index-page.html">Summer 2019</a>
                        <ul>
                            <li><a href="index-page.html">Winter 2018</a></li>
                            <li><a href="index-page.html">Spring 2017</a></li>
                        </ul>

                    </li>
                </ul>
            </li>
            <li>
                <a href="index-page.html">Brand</a>
                <ul>
                    <li><a href="index-page.html">About us</a></li>
                    <li><a href="index-page.html">Press</a></li>
                </ul>
            </li>
            <li><a href="index-page.html">Contact</a></li>
        </ul>
        <div id="ma5menu-tools" class="ma5menu__tools">
            footer <a href="index-page.html">content</a> here
        </div>

4. Initialize the plugin in jQuery document ready function with the following statements. (with all default options).

$(document).ready(function () {
     ma5menu({
             menu: '.site-menu',
             activeClass: 'active',
             footer: '#ma5menu-tools',
             position: 'left',
             closeOnBodyClick: true
           });
});

5. If you would like to open menu from right side of the page, then use change the following option. Default: ‘left’, Type: string

   position: 'right',

6. Decide weather to close menu if user click outside of it. Default: true, Type: Bool,
(false to disable).

closeOnBodyClick: true,