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

¾È³çÇϼ¼¿ä ¸ð¹ÙÀÏ¿¡¼­ »ç¿ëÇÏ¸é ±¦ÂúÀº jquery ÀÔ´Ï´Ù.
 
PC ¿¡ »ç¿ëÇصµ »ó°üÀº ¾øÁö¸¸ ¸ð¹ÙÀÏ¿¡ ´õ Àß ¾î¿ï¸±²¨ °°¾Æ¿ä  ^^;
 

 

±âº»ÀûÀÎ HTML Àº ¾Æ·¡¿Í °°Àº ±¸¼ºÀ» °¡Áö°í ÀÖ½À´Ï´Ù.

<nav id="menu">
  <header>
    <h2>Menu</h2>
  </header>
</nav>

<main id="panel">
  <header>
    <h2>Panel</h2>
  </header>
</main>


½ºÅ¸Àϵµ ´ç¿¬È÷ µû¶ó¿À°ÚÁÒ ^^

body {
  width: 100%;
  height: 100%;
}

.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 256px;
  min-height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none;
}

.slideout-menu-left {
  left: 0;
}

.slideout-menu-right {
  right: 0;
}

.slideout-panel {
  position: relative;
  z-index: 1;
  will-change: transform;
  background-color: #FFF; /* A background-color is required */
  min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}


±¸µ¿Çϱâ À§ÇÑ ½ºÅ©¸³Æ®µµ ´ç¿¬È÷ ÀÖ½À´Ï´Ù.

<script src="dist/slideout.min.js"></script>
<script>
  var slideout = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
  });

  // Toggle button
  document.querySelector('.toggle-button').addEventListener('click', function() {
    slideout.toggle();
  });
</script>



¾ÐÃàÆÄÀÏ ÇØÁ¦ ÇϽøé test Æú´õ¾È¿¡ index.html, index.right.html 2°³°¡ ÀÖ°í µÑ´Ù ¹®Á¦ ¾øÀÌ ÀÛµ¿Àº ÇÕ´Ï´Ù.
  
±×·¯³ª  index.html Àº °³¹ßÀÚ°¡ ¸Þ´º°¡ ÀÛµ¿ÇÏ´Â°É º¸¿©ÁÖ±â À§ÇØ °­Á¦·Î 2¹ø Á¤µµ ¸Þ´º°¡ ¿òÁ÷À̵µ·Ï ÇØ µÎ¾ú³×¿ä.
 
¼Ò½º ÇÏ´Ü¿¡ º¸½Ã¸é var runner = mocha.run(); Àִµ¥¿ä. ÁÖ¼®Ã³¸®ÇϽøé ÀÚµ¿ ¸Þ´º ¿òÁ÷À̴°Š¸·À» ¼ö ÀÖ½À´Ï´Ù.

Âü°íÇϼż­ ÀÌ»Û ¸ð¹ÙÀÏ »çÀÌÆ® ¸¸µé¾î º¸¼¼¿ä ^^

https://github.com/Mango/slideout  ¿¡ Á¢¼ÓÇÏ½Ã¸é ¿É¼Ç, À̺¥Æ® µé¿¡ ´ëÇÑ API ¹®¼­°¡ ÀÖÀ¸´Ï ÇÊ¿äÇϽøé Âü°í ÇϽñ⠹ٶø´Ï´Ù.
 


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 74341339 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.