(React) 리액트 드롭다운 메뉴 만들기/마우스 오버시 드롭다운 - 1탄

<포스팅 요약>

1. 결과화면

2. 동작 설명/기능 설명

3. 코드

4. 코드 설명

---

1. 결과화면

---

2. 동작 설명/기능 설명

1) 마우스오버시, 세부메뉴 드롭 다운

2) 해당하는 카테고리에 마우스가 오버됐을시, 다크블루로 표시.

(예: 메뉴1에 오버했을 시, 메뉴 1 배경색깔이 바뀜)

3) 세부 카테고리에 마우스 오버됐을시, 해당하는 카테고리 및 세부카테고리 표시.

(예: 메뉴2-1에 오버했을 시, 메뉴 2와 메뉴2-1의 배경색깔이 바뀜)

 

---

3. 코드

src / App.js

import React from "react";
import Category from "./Category";
import Contents from "./Contents";

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

export default App;

 

src / Category.js

import React, { useState } from "react";
import style from "./style/style.css";
const Category = () => {
  const menuLst = ["menu1", "menu2", "menu3", "menu4", "menu5"];
  const [hide, setHide] = useState({
    menu1: false,
    menu2: false,
    menu3: false,
    menu4: false,
    menu5: false,
  });
  const mouseEvent = (menuName, bool) => {
    const change = { ...hide };
    change[menuName] = bool;
    setHide(change);
  };
  return (
    <nav className="nav">
      <ul className="navContainer">
        {menuLst.map((v, idx) => (
          <li
            className={hide[v] ? "active" : "none"}
            onMouseEnter={() => mouseEvent(v, true)}
            onMouseLeave={() => mouseEvent(v, false)}
          >
            <p>{`메뉴${idx + 1}`}</p>
          </li>
        ))}
      </ul>
      <div className="detailMenu">
        {menuLst.map((v, idx) => (
          <ul
            onMouseEnter={() => mouseEvent(v, true)}
            onMouseLeave={() => mouseEvent(v, false)}
          >
            <li>{`메뉴${idx + 1}-${1}`}</li>
            <li>{`메뉴${idx + 1}-${2}`}</li>
            <li>{`메뉴${idx + 1}-${3}`}</li>
            <li>{`메뉴${idx + 1}-${4}`}</li>
          </ul>
        ))}
      </div>
    </nav>
  );
};

export default Category;

 

src / Contents.js

import React from "react";
import style from "./style/style.css";
const Contents = () => {
  return <div className="contents">메인 페이지 내용.</div>;
};

export default Contents;

 

src / style / style.css

.contents {
  width: 100%;
  height: 1000px;
  background-color: blanchedalmond;
}

.nav {
  height: 80px;
  overflow: hidden;
  transition: 0.25s ease-in-out;
}

.nav:hover {
  height: 200px;
  cursor: pointer;
}

.nav .navContainer {
  height: 80px;
  display: flex;
  margin: auto;
  justify-content: space-around;
  align-items: center;
  padding: 0;
}
.nav .navContainer .active {
  background-color: rgb(3, 51, 90);
  color: white;
}

.nav .navContainer .none {
  background-color: none;
}

.nav .navContainer li {
  width: 200px;
  height: 100%;
  list-style-type: none;
  font-size: 19px;
  color: rgb(3, 51, 90);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav .navContainer li p {
  margin: 0;
}

.nav .detailMenu {
  display: flex;
  overflow: hidden;
}

.nav .detailMenu ul {
  width: 200px;
  margin: auto;
  justify-content: space-around;
  padding: 0;
}

.nav .detailMenu ul li {
  text-align: center;
  list-style-type: none;
  margin-bottom: 10px;
  color: rgb(7, 7, 105);
  font-weight: 600;
}
.nav .detailMenu ul li:hover {
  cursor: pointer;
  background-color: rgb(198, 198, 241);
}

 

---

4. 코드 설명

**일단, 메뉴1,메뉴2,메뉴3... 등을 "대메뉴"라고 칭하겠습니다.

메뉴 아래의 세부메뉴들은 "소메뉴"라 칭하겠습니다.

 

1) hide객체 사용 이유

> Category.js에서는 hide라는 객체를 사용합니다.

hide 객체에는 소메뉴에 마우스오버시, 소메뉴가 해당하는 대메뉴의 배경색을 바꿔주기 위해 사용되는 객체입니다.

 

2) mouseEnter과 mouseLeave 함수

> mouseEnter 함수를 사용하여, 마우스 오버시, hide객체에서 해당하는 값을 true로 바꿔줍니다. 

>mouseLeave함수사용하여, 마우스가 해당 요소를 벗어났을 시, hide객체에서 해당하는 값을 false로 바꿔줍니다.

 

3) css에서 중요한 코드1 - 메뉴 드롭다운 동작

.nav {
  height: 80px;
  overflow: hidden;
  transition: 0.25s ease-in-out;
}

.nav:hover {
  height: 200px;
  cursor: pointer;
}

대메뉴에 마우스 오버시 세부 메뉴들을 보여줍니다.

대메뉴에 마우스 아웃을 할 경우 세부메뉴를 닫아줍니다.