Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

CSS와 JavaScript로 오프캔버스 사이드 메뉴 만들기 완벽 가이드

오프캔버스(Off-Canvas) 메뉴는 화면 밖에 숨겨져 있다가 버튼을 클릭하면 좌우에서 슬라이드로 나타나는 네비게이션 방식입니다. 모바일 웹과 반응형 디자인에서 널리 사용되며, 화면 공간을 효율적으로 활용할 수 있다는 장점이 있습니다.

이 글에서는 CSS의 transition 속성과 JavaScript의 이벤트 처리를 활용해 간단한 오프캔버스 메뉴를 구현하는 방법을 알아보겠습니다.

핵심 동작 원리

구현 방식은 매우 간단합니다. 사이드 메뉴의 기본 width를 0으로 설정해 화면에서 숨긴 뒤, 버튼 클릭 시 JavaScript로 width 값을 변경하여 메뉴를 열고 닫습니다. 여기에 transition 속성을 추가하면 부드러운 슬라이드 애니메이션 효과를 얻을 수 있습니다.

전체 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>오프캔버스 메뉴 예제</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">&times;</a>
<a href="#">로그인</a>
<a href="#">회원가입</a>
<a href="#">홈</a>
<a href="#">소개</a>
</nav>
<main class="main-content">
<button class="openSideNav">사이드 메뉴 열기</button>
<h1>샘플 텍스트입니다</h1>
<p>여기에는 임의의 샘플 텍스트가 들어갑니다.</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>

코드 설명

CSS 부분

  • .sideNav: position: fixed로 화면 왼쪽에 고정하고, width: 0으로 초기 상태에서 숨깁니다. overflow-x: hidden은 메뉴가 닫혔을 때 내부 링크들이 보이지 않도록 합니다.
  • transition: 0.5s: 메뉴가 열리고 닫힐 때 0.5초에 걸쳐 부드럽게 애니메이션이 적용됩니다.
  • .closeBtn: 메뉴 우측 상단에 위치한 닫기(X) 버튼 스타일입니다.

JavaScript 부분

  • showNav(): 메뉴의 width를 300px로 늘리고, 본문(.main-content)의 margin-left를 300px로 설정하여 콘텐츠를 오른쪽으로 밀어냅니다.
  • hideNav(): 메뉴의 width를 0으로 줄이고, 본문의 마진을 0으로 되돌려 원래 상태로 복원합니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

CSS와 JavaScript로 오프캔버스 사이드 메뉴 만들기 완벽 가이드

메뉴 열기 버튼을 클릭하면 네비게이션이 왼쪽에서 슬라이드되며 나타나고, 동시에 본문 콘텐츠가 오른쪽으로 자연스럽게 이동합니다.

CSS와 JavaScript로 오프캔버스 사이드 메뉴 만들기 완벽 가이드

마무리

이처럼 CSS의 transition과 JavaScript의 몇 줄 코드만으로도 실용적인 오프캔버스 메뉴를 만들 수 있습니다. 여기에 오버레이 배경, ESC 키로 닫기, 반응형 처리 등을 추가하면 더욱 완성도 높은 네비게이션 UI를 구현할 수 있습니다.