반응 형 햄버거 탐색 메뉴를 만드는 방법 — ReactJS 및 스타일 구성 요소

좋은 사용자 경험을 제공하는 웹 사이트를 구축하기 위해 고려해야 할 사항이 많이 있으며 그중 하나는 사이트의 반응 속도입니다. 사이트는 반응 형일 수 있지만 여전히 사용자 경험이 좋지 않습니다. 그러나 이것을 어떻게 해결합니까?

이 기사에서는 ReactjsStyled-Components를 사용하여 햄버거 반응 형 탐색 메뉴를 처음부터 만드는 방법을 안내합니다 . 이를 위해 처리해야 할 몇 가지 사항이 있습니다.

React 앱 설정

터미널에서 다음 스크립트를 실행하십시오. 그런 다음http://localhost:3000 앱을 확인하세요.

npx create-react-app responsive-nabar
cd responsive-nabar
npm start

npm install styled-components
responsive-navbar의 파일 구조

을 열고 태그 index.html바로 아래에 다음 코드를 추가하십시오 <title>.

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
</style>

여러분 RightNav.jsx, Burger.jsxNavbar.jsx파일은 아래의 각각의 코드를 가지고 있어야

그 후에 앱은 아직 스타일링없이 아래와 같이 보일 것입니다.

구성 요소에 스타일 적용

우리는 이미 스타일-구성 요소를, 우리 설치할 것을 감안할 때 RightNav.jsx, Burger.jsx그리고 Navbar.jsx다음과 같은 구성 요소가 마지막으로 볼 것이다.

이제 브라우저에서 앱을 확인할 수 있으며 다음과 같이 표시됩니다.

결론

마지막으로 클릭하면 멋진 햄버거 애니메이션이있는 반응 형 탐색 메뉴가 있어야합니다. 문제가 발생하면 GitHub 에서 저장소를 참조 할 수 있습니다.

감사

Suggested posts

Angular vs React vs Vue : 장점, 단점 및 사용시기

Angular vs React vs Vue : 장점, 단점 및 사용시기

프로그래밍 세계 Vue에서 Angular, React 및 상대적인 참신함 (2014)을 통합하는 것은 무엇입니까? 첫째, 이들 모두는 JavaScript로 작업을 단순화하고 프런트 엔드 문제를 해결하기위한 것입니다. 둘째, 이러한 각 도구를 범용이라고 부르지 만 그럼에도 불구하고 특정 디지털 제품 개발을 위해 설계되었습니다.

SPFx 및 반응 현지화, 쉬운 대안?

SPFx 및 반응 현지화, 쉬운 대안?

즉시 사용 가능한 SPFx 지역화 메커니즘이 트릭을 수행 할 수없는 상황에 직면 해 본 적이 있다면이 기사를 참조하십시오. 기본 SPFx 현지화를 사용자 지정으로 교체해야하는 이유를 몇 가지 예를 빠르게 살펴 보겠습니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.