Styled-Components를 사용하여 React 햄버거 메뉴를 만드는 방법!!!

반응형 햄버거 메뉴를 처음부터 만드는 방법을 배웁니다.

안녕하세요👋,

이 게시물에서는 ReactJS에서 햄버거 메뉴를 만드는 간단한 방법을 공유할 것입니다. 이 방법을 사용하면 원하는 모든 유형의 햄버거 메뉴를 만들 수 있습니다.

먼저 다음을 사용하여 반응 앱을 만듭니다.


스타일 구성 요소 종속성 설치,



이제 햄버거 메뉴에 대해 다른 파일을 만들고 싶다면 그렇게 할 수 있습니다. 여기서는 이 튜토리얼을 위해 app.js 파일에 모든 것을 작성하고 있습니다.

먼저 스타일이 지정된 구성 요소를 가져오는 것으로 시작합니다.

import styled from "styled-components";

먼저 하나의 고정된 둥근 메뉴를 만들어 봅시다. 이름을 MenuLabel로 지정하고 styled-component를 사용하여 만듭니다.



위의 코드에서 html의 레이블 태그인 6번 줄에 styled-component를 사용하여 둥근 메뉴에 생성했습니다.

이제 이 메뉴 위에 아이콘을 만들겠습니다.

MenuLabel 안에 쓰여진 Menu를 제거합니다.

아래와 같이 새 구성 요소 아이콘을 만듭니다.



span 요소가 될 이 Icon 구성 요소에 대한 CSS를 작성해 보겠습니다.



너비와 높이 속성만 적절하게 사용하면 간단한 수평선을 만들 수 있습니다.

우리는 의사 클래스 전후를 통해 메인 라인을 복사하고 하나는 원본 위에, 하나는 아래에 표시했습니다.

이 세 줄 모두에 대해 별도의 너비와 높이를 설정할 수 있습니다.

이제 우리에게 필요한 것은 누군가 클릭할 때마다 이 3줄로 X를 생성하는 것입니다.

상태 생성 및 상태 설정을 위한 handleClick 메서드

아이콘 구성 요소의 소품으로 이 상태를 전달합니다

.

생성한 styled-component 내에서 이 소품을 사용하십시오

.

가운데 선 숨기기

다른 두 줄에 대해 변환 및 회전 사용

위의 코드에서 볼 수 있듯이;

53행과 54행: 하나의 클릭 상태와 상태를 변경할 handleClick 메서드를 만들었습니다.

58행: onClick을 handleClick 메서드로 설정하여 클릭 상태를 변경합니다.

59행: 클릭한 소품으로 상태 클릭을 전달합니다.(클릭한 소품 이름을 원하는 대로 변경할 수 있습니다.)

22행: 이 소품을 사용하고 props.clicked가 참이면 배경이 투명해지고 그렇지 않으면 검은색이 되는 것과 같은 삼항 조건을 입력합니다. ---> 이렇게 하여 중간 선을 제거합니다. 부드럽게 제거하려면 27번 라인과 같이 전환 효과를 추가하십시오.

41행 및 45행: 누군가 아이콘을 클릭할 때 상단을 "0"으로 설정하여 두 줄이 모두 X를 형성하도록 약간 내려갑니다.

라인 42 및 46: 여기에서 이 두 라인을 모두 회전하여 Cross(X)를 형성합니다. 누군가 클릭하면 상태가 true가 되어 선이 135deg로 회전합니다. 크로스를 만들기 위해 낮은 정도를 설정할 수 있지만 135deg를 사용하면 더 많은 애니메이션을 볼 수 있습니다.

38행: 이 두 줄이 모두 부드러운 애니메이션을 생성하도록 전환을 넣습니다.

이제 호버 효과를 원하면 아래와 같이 할 수 있습니다.



위의 코드에서 볼 수 있듯이 MenuLabel을 선택한 다음 :hover를 사용합니다. 즉, 누군가가 MenuLabel을 가리킬 때마다 앞뒤 요소에 영향을 줍니다.

이전 요소는 약간 위로 이동하고 이후 요소는 약간 아래로 이동합니다.

여기에서 전체 코드를 볼 수 있습니다.