【jQuery】シンプルで超軽量なモバイルメニューMA5 mobile menu

jQuery

MA5 mobile menu

March 6, 2017

MA5 mobile menuはシンプルで超軽量なjQueryモバイルメニュー。

Getting Started

<!-- html head -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no">
<link href="./css/ma5-mobile-menu.css" media="screen, projection" rel="stylesheet" type="text/css">
<script src="./js/jquery.min.js"></script>
<script src="./js/ma5-mobile-menu.js"></script>

Call the script & option

$(document).ready(function(){
    ma5mobileMenu({
        swipe: false
    });
});

Set up HTML

Example 1

<!-- html body -->
<body>
    ...
    <!-- ma5-menu-mobile -->
    <nav class="ma5-menu-mobile">
        <div class="ma5-menu-header"> 
            <a class="btn btn-primary ma5-toggle-menu">Menu<span class="glyphicon glyphicon-menu-hamburger"></span></a>
        </div>
        <!-- lvl 1 -->
        <ul data-ma5-order="ma5-ul"> 
            <li data-ma5-order="ma5-li-1"><a href="#node1">Node 1</a></li> 
            <li data-ma5-order="ma5-li-2"><a href="#node2">Node 2</a></li> 
            <li data-ma5-order="ma5-li-3"> 
                <!-- When list item has submenu the link should have .ma5-has-submenu class -->
                <a class="ma5-path-to-active ma5-has-submenu" href="#node3">Node 3</a>

                <!-- .ma5-btn-enter for go to inside  -->
                <span class="ma5-btn-enter"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></span>

                <!-- lvl 2 -->
                <ul data-ma5-order="ma5-ul-3"> 
                    <li data-ma5-order="ma5-li-3-1">
                        <!-- .ma5-leave-bar for go to back action  -->
                        <div class="ma5-leave-bar"><span class="ma5-btn-leave"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></span>Back to Node 3</div>
                        <a href="#node3-1">Node 3-1</a>
                    </li> 
                    <li data-ma5-order="ma5-li-3-2"><a href="#node3-2">Node 3-2</a></li> 
                    <li data-ma5-order="ma5-li-3-3">
                        <a class="ma5-path-to-active ma5-has-submenu" href="#node3-3">Node 3-3</a>

                        <span class="ma5-btn-enter"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></span>

                        <!-- lvl 3 -->
                        <!-- .ma5-active-ul => active panel (only one for menu) -->
                        <ul class="ma5-active-ul" data-ma5-order="ma5-ul-3-3"> 
                            <li data-ma5-order="ma5-li-3-3-1">
                                <div class="ma5-leave-bar"><span class="ma5-btn-leave"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></span>Back to Node 3-3</div>
                                <a href="#node3-3-1">Node 3-3-1</a>
                            </li> 
                            <li data-ma5-order="ma5-li-3-3-2"><a href="#node3-3-2">Node 3-3-2</a></li>

                            <!-- .ma5-active-li => active node in active panel (only one for menu) -->
                            <!-- .ma5-path-to-active for color active link  -->
                            <li class="ma5-active-li" data-ma5-order="ma5-li-3-3-3"><a class="ma5-path-to-active" href="#node3-3-3">Node 3-3-3</a></li>
                        </ul>

                    </li> 
                    <li data-ma5-order="ma5-li-3-4"><a href="#node3-4">Node 3-4</a></li> 
                    <li data-ma5-order="ma5-li-3-5"><a href="#node3-5">Node 3-5</a></li>
                </ul> 

            </li> 
            <li data-ma5-order="ma5-li-4"><a href="#node4">Node 4</a></li> 
            <li data-ma5-order="ma5-li-5"><a href="#node5">Node 5</a></li> 
            <li data-ma5-order="ma5-li-6"><a href="#node6">Node 6</a></li> 
            <li data-ma5-order="ma5-li-7"><a href="#node7">Node 7</a></li> 
            <li data-ma5-order="ma5-li-8"><a href="#node8">Node 8</a></li>
        </ul>
    </nav>
    ...
</body>   

MIT

Latest Posts

Related Posts