ReactJs를 사용하여 반응형 navbar를 만듭니다.

전체 보기


모바일 보기

반응 앱을 만듭니다.

yarn create react-app navbar

Navbar 구성 요소를 만들고 App.js로 렌더링

import React from "react";
import Navbar from "./components/Navbar";

const App = () => {
  return (
    <>
      <Navbar />
    </>
  );
};

export default App;

전체 보기를 위한 Navbar.js용 코드

import React from "react";
import "./Navbar.css";

const Navbar = () => {
  return (
<>
    <nav className="navbar">
      <h1>Navbar</h1>
      <ul>
        <li>Home</li>
        <li>Store</li>
        <li>About Us</li>
      </ul>

      <ul>
        <li>LogIn</li>
        <li>Register</li>
      </ul>
    </nav>
</>
  );
};

export default Navbar;

전체 보기용 Navbar용 Css.

.navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1.5em;
    border-bottom: 1px solid #ccc;
}

.navbar h1 {
    cursor: pointer;
    font-size: 20px;
}

.navbar ul {
    display: flex;
    align-items: center;
    gap: 1em;
}

.navbar ul li {
    cursor: pointer;
    list-style-type: none;
    font-size: 15px;
    font-weight: 600;
}

모바일용

햄버거 아이콘을 사용하려면 타사 종속성을 설치해야 합니다.
이를 위해 react-icons 라이브러리 팩을 사용합니다.

yarn add react-icons

이제 햄버거 아이콘을 설정하려면 react-icons 라이브러리 팩에서 가져와야 합니다.

import { GiHamburgerMenu } from "react-icons/gi";

아이콘을 표시하려면

import React, { useState } from "react";
import "./Navbar.css";
import { GiHamburgerMenu } from "react-icons/gi";

const Navbar = () => {
  return (
    <>
      <nav className="navbar">
        <h1>Navbar</h1>

        <ul>
          <li>Home</li>
          <li>Store</li>
          <li>About Us</li>
        </ul>

        <ul>
          <li>LogIn</li>
          <li>Register</li>
        </ul>

        <GiHamburgerMenu
          size={20}
          className="navbarIcon"
        />
      </nav>
    </>
  );
};

export default Navbar;

이 프로젝트에 대해 반응형 UI를 생성하는 다양한 접근 방식이 있습니다. CSS 미디어 쿼리를 사용하고 useState 기능에 반응하여 UI 조건을 설정하고 jsx를 사용하여 조건이 있는 새 섹션을 생성합니다.

전체 Navbar 코드

import React, { useState } from "react";
import "./Navbar.css";
import { GiHamburgerMenu } from "react-icons/gi";

const Navbar = () => {
  const [show, setShow] = useState(false);

  const handleNavbarDisplay = () => {
    setShow(!show);
  };
  return (
    <>
      <nav className="navbar">
        <h1>Navbar</h1>

        <ul>
          <li>Home</li>
          <li>Store</li>
          <li>About Us</li>
        </ul>

        <ul>
          <li>LogIn</li>
          <li>Register</li>
        </ul>

        <GiHamburgerMenu
          onClick={() => handleNavbarDisplay()}
          size={20}
          className="navbarIcon"
        />
      </nav>

      {show && (
        <section className="navbarMobile">
          <p>Home</p>
          <p>Store</p>
          <p>About Us</p>
          <p>LogIn</p>
          <p>Register</p>
        </section>
      )}
    </>
  );
};

export default Navbar;

완전한 CSS

.navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1.5em;
    border-bottom: 1px solid #ccc;
}

.navbar h1 {
    cursor: pointer;
    font-size: 20px;
}

.navbar ul {
    display: flex;
    align-items: center;
    gap: 1em;
}

.navbar ul li {
    cursor: pointer;
    list-style-type: none;
    font-size: 15px;
    font-weight: 600;
}

.navbarIcon {
    display: none;
}

/* Mobile Responsive CSS */

@media only screen and (max-width: 600px) {
    .navbar {
        justify-content: space-between;
        height: 70px !important;
    }

    .navbar ul {
        display: none;
    }

    .navbarIcon {
        display: block;
        cursor: pointer;
    }

    .navbarMobile {
        display: flex;
        flex-direction: column;
        gap: 1.5em;
        padding: 20px;
        justify-content: flex-start;
        border-bottom: 1px solid #ccc;
    }

    .navbarMobile p {
        font-size: 18px;
        cursor: pointer;
        font-weight: 600;
    }
}

이 기사를 읽어 주셔서 감사합니다. 또한 반응형 navbar를 만들기 위해 취한 견해와 접근 방식을 공유하십시오.