jQuery Mobile Menu With Panels

November 07, 2019 No comments jQuery Menu Mobile

1. Introduction

ma5-mobile-menu is a lightweight jQuery plugin for creating a mobile-friendly menu. The plugin has nice sliding forward and back animations and comes with many features like IE11 compatibility, HTML5, left or right side option, 9kB minified script size and many more.

Jquery mobile menu with panels

2. Plugin Overview

Library ma5-mobile-menu
Author MA5
Licence MIT Licence
Repository GitHub
Dependencies jQuery 3.3.1 or Later

Demo

3. How to install and use ma5-mobile-menu jQuery plugin

Follow the below steps to install ma5-mobile-menu jQuery plugin on your website.

3.1. Load the jQuery library and ma5-mobile-menu asset files:

<!-- 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>

3.2. Create a button element that will be used to toggle the menu:

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

3.3. Create HTML structure for menu:

<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>

3.4. Initialize the script in document.ready function:

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

After initialization, the button will handle opening and closing the menu.

4. Conclusion

In this article, we presented ma5-mobile-menu jQuery plugin that let you create mobile friendly menus. This plugin was designed with small devices in mind. It has a fully responsive design that looks and works great on mobile phones.

{{ message }}

{{ 'Comments are closed.' | trans }}