½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > ¸Þ´º °ü·Ã > MA5 Mega Mobile Menu(¸ð¹ÙÀÏ ¸Þ´º) »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
MA5 Mega Mobile Menu(¸ð¹ÙÀÏ ¸Þ´º)
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù ¸Þ´º °ü·Ã
´Ù¿î·Îµå Ƚ¼ö 57 ȸ
°£´Ü¼³¸í ½½¶óÀÌµå µÇ´Â ¸Þ´º Ç÷¯±×ÀÎ ÀÔ´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ

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>



³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
¿¹Á¦¸¦ ½ÇÇàÇÏ¸é ¸Þ´º¾ÆÀÌÄܸ¸ º¸ÀÌ´Â°Ô ¾Æ´Ï¶ó ³×ºñ°ÔÀÌ¼Ç ¸Þ´º Àüü°¡ ´Ù º¸À̴µ¥ ¾îµð¸¦ ¼öÁ¤ÇØ¾ß ÇÏÁö¿ä?
2021-11-09 10:51:09
¹®¾çÈ£
Âù¼º 20
¹Ý´ë 19
RE happycgi
¾ÈŸ±õÁö¸¸ ¹®ÀÇÇØÁֽŠ³»¿ë¸¸À¸·Î´Â ¹®Á¦°¡ È®ÀεÇÁö ¾Ê¾Æ °í°´´Ô²²¼­ ¿øÇϽô ´äº¯ ¾È³»°¡ ¾î·Æ½À´Ï´Ù.
Áú¹®°ú ´äº¯ °Ô½ÃÆÇÀ¸·Î Á¶±Ý ´õ ÀÚ¼¼ÇÑ ³»¿ëÀ¸·Î ¹®ÀÇ ºÎŹµå¸³´Ï´Ù.
°¨»çÇÕ´Ï´Ù. ^^ (2021-11-15 14:03:15)
°ü¸®ÀÚ
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 96588434 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.