섹션 1: React, React Router, CSS를 사용하여 멋진 드롭다운 메뉴를 구축합니다.

작은 밑에 있는 메뉴로 당신의 사이트를 좁은 구역에 두는 것이 어떻습니까?아니면 간단한 내비게이션 도구로 당신의 간단한 레이아웃과 함께 사용할 수 있습니까?화면이 작은 크기로 축소되었을 때, 이 작은 메뉴를 사용할 수 있습니다.

the code on GitHub

지도의

카탈로그
*초보 쓰레기
* 메뉴 구성 요소
* 메뉴 CSS
*React 라우터
* 결론

초보 쓰레기
계속하기 위해 create-react-app을 만들었고 React Router을 설치했습니다. 필요하지 않은 기본 코드를 모두 삭제하고 다음과 같은 파일 구조를 설정했습니다.


메뉴 구성 요소Menu.js에는 드롭다운 목록에 있는 모든 JavaScript 및 JSX가 포함되어 있습니다.
기본적으로 네 가지 부분이 있다.

useState 갈고리 중 하나는 부울 값을 포함하고 메뉴를 열어야 하는지 여부를 표시합니다.저는 이 openMenu이라고 합니다.

은 setClassNames()이라는 함수로 메뉴 항목에 클래스를 조건부로 추가합니다.클래스의 CSS는 메뉴에 애니메이션을 설정합니다.

은 pushToRoute()이라는 함수로 React 공유기를 사용하여 관련 구성 요소를 클릭한 메뉴 항목에 보여줍니다.

Menu 구성 요소의 반환 JSX는 구조를 나타내고 모든 기능을 모으는 데 사용됩니다.

import React, {useState} from 'react';

// router
import { withRouter } from 'react-router-dom';

// styling
import './Menu.css';

const Menu = props => {
    // conditionally render dropdown affect based on this boolean
    const [openMenu, setOpenMenu] = useState(false)

    // parameter num corresponds to .open-# classes
    // is assigned when Menu clicked triggering animated dropdown
    const setClassNames = num => {
        const classArr = ["m-item"];
        if (openMenu) classArr.push(`open-${num}`)
        return classArr.join(' ')
    }

    // takes route string as parameter
    const pushToRoute = route => {
        props.history.push(route)
        setOpenMenu(false)
    }

    return (
        <div className="Menu">
            <div className={"m-item m-logo"}
                onClick={() => setOpenMenu(!openMenu)}>
                Menu
            </div>
            <div className={setClassNames(1)}
                onClick={() => pushToRoute("/dashboard")}>
                Dashboard
            </div>
            <div className={setClassNames(2)}
                onClick={() => pushToRoute("/settings")}>
                Settings
            </div>
            <div className={setClassNames(3)}
                onClick={() => pushToRoute("/")}>
                Sign out
            </div>
        </div>
  );
}

export default withRouter(Menu);

메뉴 CSS

CSS는 메뉴를 여는 모든 작업을 완료했습니다.다섯 가지 중요한 부분이 있습니다.
1 .Menu류는 가장 바깥쪽에 있는 용기다.이 층은 position: relative;이 필요합니다.
단일 메뉴 항목에는 position: absolute;이 있으므로 position이 있는 최근 구성 요소를 기반으로 렌더링됩니다.위치의 기초는 Menu 구성 요소의 외부 div입니다.
2 .m-item 클래스는 각 개별 메뉴 항목에 적용됩니다.그것들의 초기 위치는 top: 0;이다.이것은 모든 항목을 .Menudiv의 맨 위에 서로 겹치게 할 것이다.em과 모든 다른 속성에 width개의 단위를 사용했기 때문에 프로젝트가 서로 완벽하게 일치하고 응답성을 유지할 수 있습니다 (em개의 단위는 요소에 대한 글꼴 크기).
미학에 대해 나는 그들에게 background-color, box-shadow, padding, border-radius, font-size과 color을 주었다.flexbox 속성은 텍스트를 수직 및 수평으로 가운데 배치합니다.cursor 화면에서 마우스 포인터의 스타일을 변경하여 사용자 메뉴 항목을 표시할 수 있습니다.
마지막으로 transition은 setClassNames() 함수와 CSS :hover에 적용되는 변경 속성 설정 애니메이션입니다.

.Menu{
    position: relative;
    margin: 2em 3em;
}

.m-item{
    position: absolute;
    top: 0;

    width: 5.5em;
    background-color: #301A4B;
    box-shadow: 1px 2px 2px #301A4B;

    padding: 0.2em;

    border-radius: 1em;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.5em;
    color: #EDFFEC;
    cursor: pointer;

    transition: 1s;
}

3 .m-item:hover은 스톱 메뉴 항목에 작은 테두리를 추가합니다.1 픽셀의 테두리를 추가하면 항목을 약간 애니메이션화하여 그들에게 생명을 줄 수 있다.

.m-item:hover{
    border: 1px solid black;
}

4 .m-logo은 첫 번째 메뉴 항목의 특수 클래스입니다.z-index: 1;은 이div를 맨 위로 가져갔기 때문에 모든 다른div는 그 밑에 숨길 수 있습니다.z-index의 기본값은 0입니다. 따라서 하나의 항목만 성명하면 1은 모든 다른 항목의 맨 위에 놓을 수 있습니다.

.m-logo{
    z-index: 1;
}

5명은 .open-1, .open-2, .open-3의 일련의 클래스로 인해 드롭다운 메뉴의 애니메이션을 만들었습니다.맨 위 메뉴 항목을 눌렀을 때 setClassNames()을 통해 클래스를 적용합니다.
를 클릭하면 각 항목이 open-# 클래스의 새 속성으로 변환됩니다.즉, 그들은 새로 지정된 top과 새로운 background-color으로 이동할 것이다.

.open-1{
    top: 1.8em;
    background-color: #9b5de5;
}
.open-2{
    top: 3.6em;
    background-color: #f15bb5;
}
.open-3{
    top: 5.4em;
    background-color: #00BBF9;
}

React 라우터
메뉴 구성 요소의 모든 미학적 측면은 이 점에 설정되어 있다.나머지는 React Router를 설정하는 것입니다. 항목을 누르면 정확한 구성 요소를 탐색할 수 있습니다.
나는 세 단계로 나누어 이 일을 완성했다.
1 App.js 파일은 전체 프로젝트의 주요 운행 파일이기 때문에 저는 여기에 기본적인 공유기를 설치했습니다.
응용 프로그램의 귀환을 BrowserRouter으로 포장했기 때문에 곧 발표될 노선은 포함된 모든 구성 요소에 사용할 수 있습니다.
루트를 렌더링할 때 다른 루트가 비활성화되도록 Switch을 설정했습니다.에서 프로젝트에 필요한 모든 특정 노선을 정의했습니다(시범을 위해 이 노선들은 null).Menu 어셈블리는 Switch 외부에 배치되므로 App을 렌더링할 때마다 렌더링됩니다.이것은 응용 프로그램의 모든 화면에서 사용할 수 있는 효율적인 내비게이션 도구가 되었다.

import React from 'react';

// router
import { BrowserRouter, Route, Switch } from 'react-router-dom';

// styling
import './App.css';

// components
import Menu from './Menu/Menu';

const App = () => {
  return (
    <BrowserRouter>
      <div className="App">
        {/* dropdown menu */}
        <Menu/>
        {/* routes */}
        <Switch>
          <Route exact path="/settings" component={null} />
          <Route exact path="/dashboard" component={null} />
          <Route exact path="/" component={null} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

2 메뉴 구성 요소에서 withRouter을 가져와 내보내기 문장에 포장합니다.

// router
import { withRouter } from 'react-router-dom';

export default withRouter(Menu);

withRouter Menu 아이템을 제공하여 react-router-dom을 조작할 수 있습니다.이러한 정보를 액세스하기 위해 Menu에 props의 매개 변수를 제공합니다.

const Menu = props => {

3 마지막으로, 나는 함수 pushToRoute()을 작성했는데, 이것은 루트의 매개 변수 문자열을 받아들여서, 우리의 응용 프로그램을 이 루트로 전송한다.그리고 setOpenMen(false)을 호출하여 메뉴를 닫습니다.

    // takes route string as parameter
    const pushToRoute = route => {
        props.history.push(route)
        setOpenMenu(false)
    }

메뉴 항목에서 pushToRoute() onClick 을 호출합니다.
예:

   <div className={setClassNames(1)}
        onClick={() => pushToRoute("/dashboard")}>
        Dashboard
   </div>

결론
나는 이 메뉴를 만드는 것을 좋아한다.이것은 효율적이고 인코딩하기 쉬운 도구로 많은 장면에서 도움을 제공할 수 있다.나는 네가 이런 개념들이 유용하다고 생각하길 바란다.
나는 피드백을 좋아한다.무슨 건의가 있습니까?나는 기꺼이 너의 지식을 나의 지식에 첨가할 것이다.만약 당신이 이유가 있다면, 아래에서 저에게 전화를 하거나 이메일을 보내 주십시오. [email protected].
베스트제이슨 메르턴스.