햄버거 메뉴 아이콘

신동훈·2022년 7월 20일
0

styled-components

목록 보기
1/1
const BugerMenu = styled.div<Props>`
  width: 100%;
  height: 30px;
  position: fixed;
  top: 5px;
  left: 5px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  z-index: 101;
  cursor: pointer;

  div {
    width: 30px;
    height: 4px;
    margin: 1px;
    background-color: #000;
    border-radius: 4px;
    transition: all 0.4s;
    
    &:nth-child(1){
      transform: translateY(${(props) => props.toggle ? '10px' : 'none'}) 
                 rotate(${(props) => props.toggle ? '-45deg' : 'none'});
      -moz-transform: translateY(${(props) => props.toggle ? '10px' : 'none'}) 
                      rotate(${(props) => props.toggle ? '-45deg' : 'none'});
      -o-transform: translateY(${(props) => props.toggle ? '10px' : 'none'}) 
                      rotate(${(props) => props.toggle ? '-45deg' : 'none'});
      -webkit-transform: translateY(${(props) => props.toggle ? '10px' : 'none'}) 
                      rotate(${(props) => props.toggle ? '-45deg' : 'none'});
    }

    &:nth-child(2){
    opacity: ${(props) => props.toggle ? '0' : 'none'}
    }

    &:nth-child(3){
      transform: translateY(${(props) => props.toggle ? '-2px' : 'none'}) 
                 rotate(${(props) => props.toggle ? '45deg' : 'none'});
      -moz-transform: translateY(${(props) => props.toggle ? '-2px' : 'none'}) 
                      rotate(${(props) => props.toggle ? '45deg' : 'none'});
      -o-transform: translateY(${(props) => props.toggle ? '-2px' : 'none'}) 
                      rotate(${(props) => props.toggle ? '45deg' : 'none'});
      -webkit-transform: translateY(${(props) => props.toggle ? '-2px' : 'none'}) 
                      rotate(${(props) => props.toggle ? '45deg' : 'none'});
    }
  }
`;

3줄을 가진 햄버거를 만든 후 toggle이 움직일 때 마다 1번째, 3번째 줄은 회전을 주고 2번째 줄은 투명화

profile
독학 정리

0개의 댓글