반응형 헤더
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<title>Nav bar</title>
<script src="https://kit.fontawesome.com/6aa5d51fe0.js" crossorigin="anonymous"></script>
<script src="main.js" defer></script>
</head>
<body>
<nav class="navbar">
<div class="navbar_logo">
<i class="fa-brands fa-accusoft"></i>
<a href="">DreamCoding</a>
</div>
<ul class="navbar_menu">
<li><a href="">Home</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Weddings</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Bookings</a></li>
</ul>
<ul class="navbar_icons">
<li><i class="fa-brands fa-instagram"></i></li>
<li><i class="fa-brands fa-square-facebook"></i></li>
</ul>
<a href="#" class="navbar_toogleBtn">
<i class="fa-solid fa-bars"></i>
</a>
</nav>
</body>
</html>JS
const toogleBtn = document.querySelector('.navbar_toogleBtn');
const menu = document.querySelector('.navbar_menu');
const icons = document.querySelector('.navbar_icons');
toogleBtn.addEventListener('click', () => {
menu.classList.toogle('active');
icons.classList.toogle('active');
});CSS
body {
margin: 0;
font-family: 'Source Sans Pro';
}
a {
text-decoration: none;
color: white;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #263343;
padding: 8px 12px;
}
.navbar_logo {
font-size: 24px;
color: white;
}
.navbar_logo i {
color: #d49466;
}
.navbar_menu {
display: flex;
list-style: none;
padding-left: 0;
}
.navbar_menu li {
padding: 8px 12px;
}
.navbar_menu li:hover {
background-color: #d49466;
border-radius: 4px;
}
.navbar_icons {
list-style: none;
color: white;
display: flex;
padding-left: 0;
}
.navbar_icons li {
padding: 8px 12px;
}
.navbar_toogleBtn {
display: none;
position: absolute;
right: 32px;
font-size: 24px;
color: #d49466;
}
@media screen and (max-width: 768px) {
/* 로고, 메뉴바가 수직 */
.navbar {
flex-direction: column;
align-items: flex-start; /* 로고, 메뉴바 왼쪽 정렬 */
padding: 8px 24px; /* hover시 한 줄 가득 색상표시 X */
}
/* 메뉴바가 한 줄에 하나씩 */
.navbar_menu {
display: none;
flex-direction: column;
align-items: center; /* 메뉴바 가운데 정렬 */
width: 100%; /* 메뉴바 가운데 정렬 위해 너비늘림 */
}
/* 메뉴바 hover시 컨텐츠박스가 아닌 한 줄에 색상표시 */
.navbar_menu li {
width: 100%;
text-align: center; /* text는 왼쪽 정렬이 기본값이므로 center로 수정 */
}
.navbar_icons {
display: none;
justify-content: center;
width: 100%;
}
.navbar_toogleBtn {
display: block;
}
.navbar_menu.active,
.navbar_icons.active {
display: flex;
}
}문제 내용
메뉴바 아이콘을 클릭 시 메뉴 창이 아래로 펼쳐지지 않고 아무 반응이 없다.
창을 크게 하면 헤더가 길어지는 작동은 한다.
