시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > JAVASCRIPT > javascript 소스창고 > 메뉴 관련 > MA5 Mega Mobile Menu(모바일 메뉴) 상세정보
사이트등록
클라우드태그
Javascript
PHP
CSS
ASP
jquery
HTML
mysql
image
slide
Mobile
zoom
???????
무료폰트
현재접속자 새로고침
MA5 Mega Mobile Menu(모바일 메뉴)
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기
소스분류 메뉴 관련
다운로드 횟수 9 회
간단설명 슬라이드 되는 메뉴 플러그인 입니다.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기 스크랩하기

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>



네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 29255227 보이는 도배방지키를 입력하세요.