MA5 Mega Mobile Menu(모바일 메뉴) happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 메뉴 관련 > MA5 Mega Mobile Menu(모바일 메뉴) 상세정보

클라우드태그

Javascript

PHP

ASP

CSS

HTML

MYSQL

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

MA5 Mega Mobile Menu(모바일 메뉴)

해피팀

네티즌

소스분류

메뉴 관련

다운로드 횟수

61 회

간단설명

슬라이드 되는 메뉴 플러그인 입니다.

평가하기

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>