웹 페이지에서 버튼을 눌러 슬라이드 형태로 열리고 닫히는 사이드 내비게이션 메뉴는 사용자 경험을 높이는 대표적인 UI 요소입니다. CSS의 transition 속성과 간단한 JavaScript만 활용하면 부드러운 애니메이션 효과가 적용된 사이드 메뉴를 손쉽게 구현할 수 있습니다.
전체 예제 코드
다음은 애니메이션이 적용되고 닫기 기능까지 갖춘 사이드 내비게이션 메뉴를 만드는 완성된 코드입니다.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.sideNav {
height: 100vh;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(46, 218, 195);
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sideNav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #000000;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sideNav .closeBtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
button {
padding: 15px;
background-color: rgb(0, 27, 145);
color: rgb(255, 255, 255);
font-size: 20px;
border: none;
border-radius: 2%;
}
</style>
</head>
<body>
<nav class="sideNav">
<a href="#" class="closeBtn">×</a>
<a href="#">Login</a>
<a href="#">Register</a>
<a href="#">Home</a>
<a href="#">About Us</a>
</nav>
<button class="openSideNav">Click here to open sideNav</button>
<script>
let openBtn = document.querySelector(".openSideNav");
openBtn.addEventListener("click", () => {
showNav();
});
let closeBtn = document.querySelector(".closeBtn");
closeBtn.addEventListener("click", () => {
hideNav();
});
function showNav() {
document.querySelector(".sideNav").style.width = "300px";
}
function hideNav() {
document.querySelector(".sideNav").style.width = "0";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
버튼을 클릭하면 사이드 내비게이션이 좌측에서 부드럽게 열립니다.
반대로 오른쪽 상단의 ×(닫기) 버튼을 클릭하면 사이드 내비게이션이 다시 닫힙니다.
동작 원리 살펴보기
1. CSS 설정
.sideNav 클래스는 화면 전체 높이(100vh)를 차지하는 고정(position: fixed) 요소로, 초기 너비를 0으로 지정해 평소에는 보이지 않도록 합니다. 여기서 핵심은 transition: 0.5s 속성으로, 너비 값이 변경될 때 0.5초에 걸쳐 자연스러운 애니메이션 효과가 적용됩니다. 또한 overflow-x: hidden을 지정해 너비가 늘어나는 동안 메뉴 항목이 밖으로 삐져나오지 않게 합니다.
2. JavaScript로 열고 닫기
JavaScript에서는 querySelector로 열기 버튼과 닫기 버튼을 각각 선택한 뒤, 클릭 이벤트 리스너를 등록합니다. 열기 버튼을 누르면 showNav() 함수가 실행되어 사이드 메뉴의 너비를 300px로 늘리고, 닫기 버튼을 누르면 hideNav() 함수가 너비를 다시 0으로 줄입니다. 이처럼 너비 값만 변경하면 CSS 트랜지션이 자동으로 부드러운 슬라이드 애니메이션을 만들어 줍니다.
마무리
이 예제는 최소한의 코드로 모바일 웹이나 반응형 사이트에서 자주 사용되는 햄버거 메뉴의 기본 원리를 보여줍니다. 배경색, 너비, 폰트 등의 스타일을 조정하거나 반투명 오버레이를 추가하는 방식으로 자신만의 스타일로 확장해 볼 수 있습니다.