다양한 웹사이트에서 쓰이는 반응형 토글식 collapse navbar를 구현해보았다.
필요한 분들이 가져가서 수정할 수 있도록 최소한의 요소들만 사용해서 코드를 작성했다.
반응형 네비바를 구현할때 어려움을 느꼈던 점은 transition이었다.
height: 0 ~ height :auto 에서는 transition이 동작하지 않았었다.
transition이 height auto와 같은 명시적이지 않은 변화에는 동작하지 않는다는 사실을
스택오버플로우를 통해 알게되었고, 이 지식을 토대로 네비바를 완성했다.
추가해보면 좋을 것들
- 웹 접근성 추가 (aria-expanded, aria-hidden 등) - 화면에서만 안보일뿐 DOM에는 존재하므로, 별도로 웹 접근성을 추가해주면 좋을 것 같다. 개인 프로젝트에는 웹 접근성 요소까지 도입할 예정이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Collapse Navbar</title>
<style>
.header {
display: flex;
justify-content: space-between;
background-color: gray;
}
.header-title {
background-color: aqua;
}
.header-nav-collapse {
display: flex;
flex-basis: 75%;
justify-content: space-between;
background-color: teal;
}
.nav-menu {
display: flex;
list-style: none;
background-color: tomato;
}
.nav-menu li {
padding: 5px;
margin: 5px;
background-color: aqua;
}
.nav-user {
background-color: blueviolet;
}
.header-toggle {
position: absolute;
display: none;
}
@media screen and (max-width: 800px) {
.header,
.header-nav-collapse,
.nav-menu {
flex-direction: column;
}
.header-toggle {
display: block;
right: 15px;
top: 40px;
}
.header-nav-collapse {
transition: all 0.2s ease-out;
max-height: 0;
overflow: hidden;
}
.header-nav-collapse.active {
transition: all 0.35s ease-in;
max-height: 600px;
}
}
</style>
</head>
<body>
<header class="header">
<h1 class="header-title">헤더</h1>
<nav class="header-nav-collapse">
<ul class="nav-menu">
<li>Home</li>
<li>About</li>
<li>Something</li>
</ul>
<div class="nav-user">
<button>Login</button>
<button>SignUp</button>
</div>
</nav>
<button class="header-toggle">toggle</button>
</header>
</body>
<script>
const toggleBtn = document.querySelector(".header-toggle");
const collapsBox = document.querySelector(".header-nav-collapse");
toggleBtn.addEventListener("click", () => {
collapsBox.classList.toggle("active");
});
</script>
</html>
'HTML, CSS' 카테고리의 다른 글
| relative 좌표평면과 absolute, z-index (1) | 2023.12.11 |
|---|---|
| Element.scrollHeight, window.innerHeight, window.scrollY (0) | 2023.12.07 |
| [white-space] 태그에 줄바꿈이 맘대로 되지 않을 때 (0) | 2023.07.03 |
| transform (scale, rotate, translate, skew, transform-origin) (0) | 2023.02.06 |
| [CSS] 선택자 명시도(selection-specificity) 문제 (0) | 2022.11.01 |
