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

Mobile-Friendly Sliding Mega Menu with CSS and jQuery
Code Snippet:MA5 Mobile Menu
Author: MA5
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 5,334
License: MIT
Edit Code online: View on CodePen
Read More

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,

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X