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

»çÀÌÆ® Á¦À۽à ¸¹ÀÌ »ç¿ëµÇ´Â Ç®¸Þ´º ¼Ò½º¸¦ °øÀ¯ÇÕ´Ï´Ù.



HTML ¼Ò½º

.plus-btn-pos 
  .plus-btn
    .r1
    .r2
.content
  div
    h1 Fullscreen Menu
    h2 Flexbox Style
.menu-container  
  - for i in (1..3)
      .menu-sliders
  .menu
    ul
      li
        a Home
      li
        a About      
      li
        a Work
      li
        a Contact



CSS ¼Ò½º

@import url(https://fonts.googleapis.com/css?family=Roboto:300,100);

.content {
  display:flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100vh;
  width: 100vw;  
  z-index: 1;
  text-align:center;
  font-family: 'Roboto', sans-serif;
  color: black;
  h1 {
    font-size: 60px;  
    margin-bottom: 15px;
    font-weight: 300;
  }
  h2 {
    font-size: 42px;
    font-weight: 100;
  }
}

.menu-container {
  z-index: 2;
  position: relative;
  display:flex;
  align-items: stretch;
  overflow: hidden;
  height: 100vh;
  width: 100vw;  
  pointer-events:none;
}

.menu {
  display:flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100vh;
  width: 100vw;  
  z-index: 3; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(-100%);
  transition: transform 0.5s;
  transition-delay:0.5s;
  visibility: hidden;
  ul {
    li {
      font-family: 'Roboto', sans-serif;
      font-weight: 100;
      font-size: 45px;
      color: white;
      min-height: 45px;
      padding: 15px;
      text-align: center;
      a{
        cursor:pointer;
      }
    }
  }
}

.menu-sliders {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: flex 0.45s;
  &:nth-child(2) {
    flex:1 0 100%;
    background: transparent;
  }  
    &:nth-child(odd){
      background: darken(dodgerblue,20%);
  }
}

.plus-btn-pos {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
}

.plus-btn {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: white;
  position: relative;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  cursor:pointer;
  div{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 3px;
    background: rgba(2, 89, 165, 1);
    transition: transform 0.3s;
    transition-delay: 0.5s;
  }
  .r1{
    transform: translateX(-50%)translateY(-50%)rotate(-90deg);   
  }
  .r2{
    transform: translateX(-50%)translateY(-50%)rotate(-180deg);
  }
  
  &:hover{
      background: rgba(2, 89, 165, 1);
    div{
      background: white;
    }
  }
  &:active{
      box-shadow: none;
  }
}  

body.menu-open {  
  .menu-sliders:nth-child(2) {
     flex:0 0 0%;
  } 
  .menu {
    transform: translateY(0%);
    visibility: visible;
    pointer-events:all;
  }
 .plus-btn {
    .r1{
      transform: translateX(-50%)translateY(-50%)rotate(-45deg);   
    }
    .r2{
      transform: translateX(-50%)translateY(-50%)rotate(-135deg);
    }  
  }
}
  



JS ¼Ò½º

$('.plus-btn').click(function(){
  $('body').toggleClass('menu-open');
})

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