[해피CGI][cgimall] MA5 Mega Mobile Menu(모바일 메뉴)

jQuery 를 이용한 메뉴 플러그인 입니다. 

압축된 js 파일은 9KB로 매우 가볍습니다. 

IE11 에서도 구동 됩니다.

왼쪽 메뉴 또는 오른쪽 메뉴 형태로 설정하여 사용할 수 있습니다.

HTML5를 사용 합니다.

BEM 표기법을 사용합니다.

라이센스는 MIT License (MIT) 입니다.


아래는 실행화면 입니다.

 

사용법 안내 입니다.


1. 라이브러리를 호출 합니다.
<!-- jQuery -->
<script src="./js/jquery.js"></script>

<!-- ma5menu -->
<link href="./css/ma5-menu.min.css" rel="stylesheet" type="text/css">
<script src="./js/ma5-menu.min.js"></script>


2. 컨텐츠 및 메뉴를 선언 합니다.
        <!-- mobile menu toggle button start -->
        <button class="ma5menu__toggle" type="button">
            <span class="ma5menu__icon-toggle"></span><span class="ma5menu__sr-only">Menu</span>
        </button>
        <!-- mobile menu toggle button end -->
        
        <!-- source for mobile menu start -->
        <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>
                            <!-- active -->
                            <li class="active"><a href="index-page.html">Example 4</a></li>
                            <li><a href="index-page.html">Example 5</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                ...................................
            </li>
            ...................................
            ...................................
            <li><a href="index-page.html">Contact</a></li>
        </ul>
        <!-- source for mobile menu start -->
        
        <!-- source for mobile menu footer start -->
        <div id="ma5menu-tools" class="ma5menu__tools">
            footer <a href="index-page.html">content</a> here
        </div>


3. 실행
        <!-- Call the script -->
        <script>
            $(document).ready(function () {
                ma5menu({
                    menu: '.site-menu',
                    activeClass: 'active',
                    footer: '#ma5menu-tools',
                    position: 'left',
                    closeOnBodyClick: true
                });
            });
        </script>