Next.js+BULMA로 애니메이션 햄버거 메뉴 만들기
하고 싶은 일
BULMA은 매우 가볍고 다루기 쉽고 확장 가능한 CSS 프레임 워크입니다.
BULMA 도입
<Head> 태그내에, BULMA를 사용하기 위한 링크를 추가합니다. components/layout.tsx
<Head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
<link rel="stylesheet" href="https://bulma.io/vendor/fontawesome-free-5.15.2-web/css/all.min.css" />
</Head>
NavBar 구성 요소 만들기
components/NavBar.tsx를 만들고 components/layout.tsx에서 호출합니다.
Navbar | BULMA 의 문서로부터 copipe 해 만들었습니다.
components/NavBar.tsx
import React, { useState } from 'react'
export default function NavBar() {
const [openMenu, setOpenMenu] = useState('')
const toggleMenu = () => openMenu === 'is-active' ? setOpenMenu('') : setOpenMenu('is-active')
return (
<nav className="navbar" role="navigation" aria-label="main navigation">
<div className="container">
<div className="navbar-brand">
<a role="button" className={`navbar-burger ${openMenu}`}aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" onClick={toggleMenu}>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" className={`navbar-menu ${openMenu}`}>
// 省略（ここにメニューを配置する）
</div>
</div>
</nav>
)
}
🌟 포인트
const [openMenu, setOpenMenu] = useState('')에서 toggleMenu의 초기 값 설정 toggleMenu 는 햄버거 메뉴의 개폐를 toggle한다function className={`navbar-burger ${openMenu}`}에서 햄버거 메뉴의 개폐시 CSS를 설정하는 요소 판별을위한 클래스를 openMenu라는 변수에 저장하고 부여합니다.className={`navbar-menu ${openMenu}`}도 마찬가지입니다.메뉴 개폐에 애니메이션 추가
styles/global.css에 다음 소스를 더하십시오
styles/global.css
.navbar {
position: sticky;
top: 0;
min-height: 3.5rem;
}
.navbar-brand {
min-height: 3.5rem;
}
@media screen and (max-width:1023px) {
html,
body {
font-size: 82.5%;
}
.navbar-menu {
width: 3.5rem;
top: 0rem;
opacity: 0;
transition: all 0.3s;
display: block;
z-index: -1;
position: absolute;
width: 100%
pointer-events: none;
}
.navbar-menu.is-active {
transform:translateY(3.5rem);
opacity: 1;
z-index: 10;
pointer-events: auto;
}
.navbar-burger {
height: 3.5rem;
width: 3.5rem
}
}
🌟 포인트
z-index: -1; 에서 숨기기, z-index: 10; 로 표시합니다.opacity: 0; 및 opacity: 1;는 푹신한 표시/숨기기 위해 지정됩니다 transform:translateY(3.5rem);는 위에서 내려 오도록 지정 opacity: 0; 의 경우, 링크는 사라지지 않기 때문에 밀어 버린다. 따라서 pointer-events: auto; 와 pointer-events: none; 에서 메뉴가 숨겨진 경우 메뉴 링크를 클릭할 수 없습니다. .navbar position: sticky; 및 top: 0;는 Navbar를 고정하기 위해 지정되었으므로 필요하지 않으면 삭제합니다.감상
미리보기는 이 사이트에서 가능합니다
Reference
이 문제에 관하여(Next.js+BULMA로 애니메이션 햄버거 메뉴 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ricorico/items/3b9dc1c9c7517fa8cd47텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
