1. 구현 결과 미리보기
2. 분석
웹 디자인 분야에서 햄버거 메뉴는 사용자 경험을 향상시키고 화면 공간을 효율적으로 활용하는 핵심 요소입니다. 이번 글에서는 HTML, CSS, JavaScript를 활용하여 효과적인 애니메이션 효과를 적용한 햄버거 메뉴를 소개하겠습니다.
애니메이션 효과의 중요성
햄버거 메뉴에 적절한 애니메이션을 추가함으로써 사용자에게 시각적인 흥미를 제공하고, 메뉴의 활성화 상태를 명확하게 전달할 수 있습니다. 이는 사용자와의 상호작용을 부드럽고 자연스럽게 만들어주어 전반적인 웹 경험을 향상시킵니다.
애니메이션 효과의 적용
코드에서 .menu.active 클래스가 활성화되면 각 바에 특별한 애니메이션 효과가 적용됩니다. 첫 번째 바는 시계방향으로 45도 회전하고, 세 번째 바는 반시계방향으로 45도 회전하여 햄버거 메뉴의 활성화를 명확히 시각적으로 전달합니다.
이러한 디자인은 직관적이며, 햄버거 메뉴의 상태를 사용자에게 명확하게 시각적으로 전달하는 데 효과적입니다. 여러분도 이 코드를 활용하여 자신만의 햄버거 메뉴를 디자인하고 구현해보세요.
3. 구현
코드 구조 설명
아래 코드는 간단한 햄버거 메뉴를 만들기 위한 HTML, CSS, JavaScript를 포함하고 있습니다. 코드의 주요 구조는 다음과 같습니다.
3.1. HTML
<div class="pv-box">
<!-- 메뉴 아이콘이 포함된 컨테이너 -->
<div class="container">
<!-- 햄버거 메뉴 아이콘 -->
<div class="menu menu-icon" onclick="toggleSidebar()">
<!-- 햄버거 바 세 개 -->
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
</div>3.2. CSS
.menu {
/* 햄버거 메뉴 아이콘 스타일 */
cursor: pointer;
width: 25px;
height: 30px;
position: relative;
}
.menu.active .bar {
/* 햄버거 메뉴 활성화 상태일 때 바의 위치를 조정 */
position: absolute;
}
.menu.active .bar:nth-child(2) {
/* 햄버거 메뉴 활성화 상태일 때 중간 바를 투명하게 만들어 숨김 */
opacity: 0;
}
.menu.active .bar:first-child {
/* 햄버거 메뉴 활성화 상태일 때 상단 바를 45도 회전 */
top: 25%;
transform: rotate(45deg);
}
.menu.active .bar:last-child {
/* 햄버거 메뉴 활성화 상태일 때 하단 바를 -45도 회전 */
top: 25%;
transform: rotate(-45deg);
}
.bar {
/* 햄버거 바 스타일 */
width: 25px;
height: 3px;
background-color: white;
margin: 6px 0;
transition: 1s; /* 트랜지션 효과로 부드러운 애니메이션 적용 */
}3.3. JS
// 햄버거 메뉴 토글 함수
function toggleSidebar() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}3.4. 전체 코드
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hamburger Menu animate</title>
<style>
.pv-box {
border: 1px solid black;
padding: 10px;
}
.container {
height: 150px;
background-color: burlywood;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
cursor: pointer;
width: 25px;
height: 30px;
position: relative;
}
.menu.active .bar {
position: absolute;
}
.menu.active .bar:nth-child(2) {
opacity: 0;
}
.menu.active .bar:first-child {
top: 25%;
transform: rotate(45deg);
}
.menu.active .bar:last-child {
top: 25%;
transform: rotate(-45deg);
}
.bar {
width: 25px;
height: 3px;
background-color: white;
margin: 6px 0;
transition: 1s;
}
</style>
</head>
<body>
<div class="pv-box">
<div class="container">
<div class="menu menu-icon" onclick="toggleSidebar()">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
</div>
<script>
function toggleSidebar() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body>
</html>
