햄버거 메뉴 CSS CSS 및 JavaScript로 햄버거 메뉴 아이콘을 만드는 방법

Devin Edwards의 Unsplash님의 사진

최근에는 프론트엔드 기술, 특히 CSS와 애니메이션을 개선하는 데 많은 시간을 투자하고 있습니다. 그들이 말했듯이 당신이 무언가를 잘하고 싶다면 많은 연습을 해야 합니다. 포트폴리오 작업을 하면서 햄버거 메뉴 아이콘이 필요했는데, 기존에 있는 것을 사용하고 싶지 않아서 직접 만들기로 했습니다.

전제 조건

기본적인 HTML, CSS 및 Javascript 지식만 따라하면 됩니다.

HTML 작성

HTML은 매우 간단합니다. 아이콘, 메뉴 아이콘 및 그 안에 중첩된 세 줄에 대한 컨테이너가 있습니다.

<div class="container">
  <div class="menu-icon">
    <span class="line-1"></span>
    <span class="line-2"></span>
    <span class="line-3"></span>
  </div>
</div>

페이지의 기본 스타일

이것은 아이콘을 중앙에 놓고 모든 것을 보기 좋게 만들기 위한 것입니다.

body {
  background: #09182F;
}

.container {
  width: 100%;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

메뉴 아이콘 스타일 지정

grid 를 사용하여 메뉴 아이콘과 내포된 줄을 쉽게 배치할 수 있습니다. place-items: center는 두 가지 기능을 수행하는 스위스 군용 칼입니다. align-items: center 및 justify-items: center .

.menu-icon {
  display: grid;
  place-items: center;
  height: 55px;
  width: 50px;
  cursor: pointer;
}

3줄 스타일링

다음을 추가하여 중첩된 선의 스타일을 지정합니다. 아이콘이 덜 전통적으로 보이도록 첫 번째 줄과 두 번째 줄에 서로 다른 너비를 제공합니다.

.menu-icon {
...

  & > span {
    width: 50px;
    height: 3px;
    background: red;
    display: block;
    transition: all 0.3s ease-in-out;
  }
}

.line-1 {
  width: 42px;
  justify-self: end;
}

.line-2 {
  width: 35px;
  justify-self: end;
}

호버 효과

호버 효과에서 첫 번째와 두 번째 줄의 너비를 변경합니다. 전환을 통해 폭 사이를 매끄럽고 원활하게 전환할 수 있습니다.

.menu-icon {
...

  &:hover span:nth-child(1) {
    width: 35px;
  }

  &:hover span:nth-child(2) {    
    width: 40px;
  }
}

아이콘 onClick 애니메이션

여기에 재미있는 부분이 있습니다. 클릭했을 때 첫 번째와 세 번째 선이 회전하여 X를 형성하고 두 번째 선이 사라지도록 만들고 싶습니다.

.menu-icon {
...

  &.active span:nth-child(1) {
    transform-origin: center center;
    transform: rotate(-45deg) translate(-12px, 12px);
    width: 55px;
  }

  &.active span:nth-child(2) {
    transform: translateX(10px);
    opacity: 0;
  }

  &.active span:nth-child(3) {
    transform-origin: center center;
    transform: rotate(45deg) translate(-15px, -14px);
    width: 55px;
  }
}

menu-icon를 클릭하면 active 클래스가 추가되고 1번째와 2번째lines가 대상이 되며 rotate & translate 속성을 사용하여 X를 형성합니다. 또한 2번째 줄을 숨깁니다. translateX를 사용하여 이동하고 불투명도를 0으로 설정합니다.

자바스크립트 추가

남은 것은 active 클래스를 토글하기 위해 약간의 J를 추가하는 것입니다.

const menuIcon = document.querySelector('.menu-icon');

function toggleMenuIcon() {
  menuIcon.classList.toggle('active')
}

menuIcon.addEventListener('click', toggleMenuIcon);

그리고 당신은 간다. 우리만의 맞춤형 햄버거 메뉴 아이콘. 최종 결과는 아래와 같습니다.



새로운 것을 배웠다면 좋아요와 댓글을 남겨주세요.