웹 페이지에서 화면 공간을 효율적으로 활용하면서도 필요할 때만 등장하는 사이드 내비게이션(사이드패널) 메뉴는 사용자 경험을 한층 끌어올리는 인터페이스 요소입니다. 특히 모바일 환경에서는 콘텐츠 영역을 최대한 확보하면서 메뉴에 접근할 수 있어야 하기 때문에, 접었다 폈다 할 수 있는 사이드패널이 자주 활용됩니다.
구현 원리는 생각보다 간단합니다. 사이드패널의 초기 너비를 0으로 설정해 화면에서 숨겨둔 뒤, 버튼을 클릭하면 JavaScript가 패널의 너비를 늘려 열고, 닫기 버튼을 누르면 다시 0으로 줄여 닫는 방식입니다. 여기에 CSS의 transition 속성을 더하면 패널이 부드러운 애니메이션 효과와 함께 열리고 닫히게 됩니다.
예제
다음은 CSS와 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 {
width: 0;
height: 300px;
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>
<section>
<h1>This is some random heading</h1>
<h1>This is another heading</h1>
<h1>Here is another random heading</h1>
</section>
<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 = "30%";
}
function hideNav() {
document.querySelector(".sideNav").style.width = "0";
}
</script>
</body>
</html>코드 핵심 포인트
- .sideNav 스타일: position: fixed로 화면 왼쪽에 고정하고, 초기 width를 0으로 설정해 평소에는 보이지 않게 합니다. transition: 0.5s가 열리고 닫힐 때의 부드러운 애니메이션을 담당합니다.
- overflow-x: hidden: 패널이 닫혀 있을 때 내부 링크들이 화면 밖으로 삐져나오지 않도록 가려줍니다.
- showNav() 함수: 열기 버튼 클릭 시 패널의 width를 30%로 변경해 사이드패널을 펼칩니다.
- hideNav() 함수: 닫기 버튼(×) 클릭 시 width를 다시 0으로 되돌려 패널을 접습니다.
출력
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
사이드패널 열기 버튼을 클릭하면 −
이처럼 몇 줄의 CSS와 간단한 JavaScript만으로도 전문적인 느낌의 접을 수 있는 사이드패널 메뉴를 손쉽게 만들 수 있습니다. 패널의 색상, 너비, 애니메이션 속도 등을 조절해 자신만의 스타일로 응용해 보세요.