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

Yet another mega menu plugin that is specially designed for mobile devices with excellent sliding forward and back animations. The plugin creates a mobile-friendly, off-canvas, sliding mega menu with options to open from left or right.

How to Create Sliding Mega Menu

1. To get started with MA5 Menu, first load the jQuery and plugin’s CSS and JavaScript files 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 a menu structure like the one 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 the 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 the menu from the right side of the page, change the following option. Default: ‘left’, Type: string

   position: 'right',

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

closeOnBodyClick: true,

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.