CSS와 JavaScript를 활용하면 클릭 한 번으로 열고 닫을 수 있는 슬라이드형 사이드바 메뉴를 손쉽게 구현할 수 있습니다. 핵심 원리는 사이드바의 width 값을 0으로 설정해 두었다가, 버튼 클릭 시 JavaScript로 너비를 변경하는 것입니다. transition 속성을 함께 사용하면 메뉴가 부드럽게 애니메이션되며 나타나고 사라집니다.
전체 예제 코드
<!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%;
}
.main-content{
transition: 0.5s;
}
</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>
<main class="main-content">
<button class="openSideNav">Click here to open sideNav</button>
<h1>Here is some sample text</h1>
<p>Here is some random sample text too</p>
</main>
<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";
document.querySelector('.main-content').style.marginLeft = "300px";
}
function hideNav() {
document.querySelector(".sideNav").style.width = "0";
document.querySelector('.main-content').style.marginLeft = "0px";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'sideNav 열기' 버튼을 클릭하면 내비게이션 메뉴가 왼쪽에서 부드럽게 슬라이드되어 나타납니다.
코드 동작 원리
1. 사이드바 기본 스타일 (.sideNav)
.sideNav 클래스는 position: fixed로 화면 왼쪽에 고정되며, 처음에는 width: 0으로 설정되어 화면에 보이지 않습니다. transition: 0.5s 덕분에 너비가 변할 때 0.5초에 걸쳐 부드러운 애니메이션이 적용됩니다.
2. 메뉴 열기 (showNav 함수)
열기 버튼을 클릭하면 showNav() 함수가 호출되어 사이드바의 너비를 300px로 늘리고, 동시에 본문 콘텐츠의 margin-left도 300px로 조정하여 메뉴가 콘텐츠를 가리지 않도록 합니다.
3. 메뉴 닫기 (hideNav 함수)
닫기 버튼(×)을 클릭하면 hideNav() 함수가 실행되어 사이드바 너비를 다시 0으로 줄이고 본문 여백도 원래대로 되돌립니다.
마무리
이처럼 CSS의 transition과 JavaScript의 이벤트 리스너만으로도 별도 라이브러리 없이 실용적인 접이식 사이드바를 만들 수 있습니다. 필요에 따라 메뉴 항목을 추가하고 색상·크기를 조절해 자신만의 스타일로 응용해 보세요.