<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="navbar-container">
<div>Navbar</div>
<button id="navbar-toggle">=</button>
</div>
<div id="navbar-items">
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
</div>
<script>
const navBarItems = document.getElementById("navbar-items");
const toggleButton = document.getElementById("navbar-toggle");
const navbarOpenToggler = () => {
navBarItems.style.display =
navBarItems.style.display === "block" ? "none" : "block";
};
toggleButton.addEventListener("click", navbarOpenToggler);
</script>
</body>
</html>-
.navbar-container {
display: flex;
background-color: rgb(221, 221, 221);
justify-content: space-between;
border-bottom: 1px solid gray;
padding: 20px 12px;
}
#navbar-items {
display: none;
}
.item {
border-bottom: 1px solid rgb(202, 202, 202);
padding: 12px;
}
'코딩' 카테고리의 다른 글
| Zustand 사용 원칙과 예제 (0) | 2025.08.05 |
|---|---|
| Zustand 공부 시작 (0) | 2025.08.04 |
| HTML + CSS + JS 알림 창 만들기 (0) | 2025.07.28 |
| 움직이는 Skeleton UI 구현 (0) | 2025.07.27 |
| 화면 너비에 따라 변하고 클릭 시 열리고 닫히는 메뉴 만들기 (0) | 2025.07.26 |
댓글