확장 가능한 애니메이션 햄버거 메뉴 2021 🔥| HTML 및 CSS

아름다운 햄버거 탐색 메뉴 아이콘을 만들었지만 다양한 크기로 확장하는 것이 매우 어려운 상황을 경험한 적이 있습니까? 그렇다면 계속 읽으십시오 ...

오늘 우리는 반응형 및 확장 가능한 애니메이션 햄버거 탐색 메뉴를 구축할 것입니다. 이 자습서에는 HTML 및 CSS 지식만 필요합니다.
전체 코드는 Codepen에서 찾을 수 있습니다.

코드펜

유튜브 튜토리얼

목차 🔥

HTML

SCSS

Conclusion

HTML

We will use the Logic of a checkbox(checked & unchecked state) to change the animation of our hamburger menu icon

Write the code below -

<div class="menu">
  <input type="checkbox" name="menu-active" id="menu-active">
  <div class="items first">
    <div class="i-1">Home</div>
    <div class="i-2">About</div>
  </div>
  <label for="menu-active">
    <div class="lines">
      <div class="line-1"></div>
      <div class="line-2"></div>
      <div class="line-3"></div>
    </div>
  </label>
  <div class="items last">
    <div class="i-3">Services</div>
    <div class="i-4">Contact</div>
  </div>
</div>

SCSS

Use scss instead of css, because it gives us much more functionalities than css.

1단계: 브라우저의 모든 기본 스타일을 제거하고 * 및 본문 태그에 규칙과 논리를 추가합니다.

코드 -

*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  body{
    display: grid;
    place-items:center;
    width: 100%;
    height:100vh;
    background-color: black;
    color: #adb5bd;
    font-family: Sans-serif;
    input[type="checkbox"]{
      display: none;
    }
  }
}

2단계: 우리 프로젝트의 주요 Sause 추가.

이 블록을 제어판이라고 부를 것입니다. 이 값을 변경하면 전체 프로젝트가 그에 따라 변경됩니다.

$width:60px;  
$height:8px; 
$margin:10px; 
$font-size: 18px;
$animation-time: .6s;

3단계 : 템플릿

동일한 코드 반복을 중지하려면 @mixin을 만드십시오. 커피보다 시간이 소중하니까 XD

@mixin flex($dir,$jus, $ai){
  display: flex;
  flex-direction:$dir;
  justify-content:$jus;
  align-items: $ai;
}

4단계: .lines 클래스의 스타일 지정 규칙

.lines{
  cursor:pointer;
  z-index:1;
  [class ^="line-"]{
    width: $width;
    height:$height;
    background-color: #fff;
    margin: $margin 0;
    transition:all $animation-time ease;
  }
}

5단계 : 일반 형제 선택자를 사용하여 #menu-active id 상태 변경

#menu-active:checked ~ label{
  .line-1{
    transform: translatey($height+ $margin) rotate(45deg);
  }
  .line-2{
    transform:scale(0);
  }
  .line-3{
    transform: translatey(-($height+$margin)) rotate(-45deg);
      }
}

6단계 : 아래 믹스인 사용

.menu{
  @include flex(row, null, null);
}
label{
  @include flex(row,null, null);
}

7단계: .items 클래스 스타일 지정

.items{
  z-index:0;
  transition: all $animation-time ease;
  font-size: $font-size;
  font-weight:600;
  @include flex(row, center, center);
  [class ^="i-"]{
    margin: 0 $margin;
    cursor:pointer;
    transition: all .3s ease;
    &:hover{
      color:white;
    }
  }
}

8단계: .first 및 .last 클래스 스타일 지정

.first{
  transform: translatex(100px);
  opacity:0%;
  pointer-events:none; // removes the cursor: pointer

}
.last{
  transform:translatex(-100px);
  opacity:0%;
  pointer-events:none; // removes the cursor: pointer
}

9단계: 상태 변경과 함께 .first 및 .last 클래스의 스타일 변경

#menu-active:checked{
  & ~ .first{
    transform: translatex(0px);
    opacity:100%;
    pointer-events:auto; // brings back the cursor: pointer
  }
  & ~ .last{
    transform: translatex(0px);
    opacity:100%;
    pointer-events:auto; // brings back the cursor: pointer
  }
}

결론

We're done with the project. 🔥

제안과 비판은 매우 감사합니다 ❤️

유튜브

트위터

인스타그램

Reference

이 문제에 관하여(확장 가능한 애니메이션 햄버거 메뉴 2021 🔥| HTML 및 CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/joyshaheb/scalable-animated-hamburger-menu-2021-html-css-2458

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다