CSS와 JavaScript로 전체 화면 오버레이 내비게이션 메뉴 만드는 방법

웹사이트에 세련된 사용자 경험을 더하고 싶다면 전체 화면 오버레이 내비게이션 메뉴가 좋은 선택입니다. 버튼을 클릭하면 화면 전체를 부드럽게 덮는 메뉴가 열리고, 닫기(×) 버튼을 누르면 다시 사라지는 방식입니다.

아래 예제에서는 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 = "100%";
}
function hideNav() {
   document.querySelector(".sideNav").style.width = "0";
}
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

CSS와 JavaScript로 전체 화면 오버레이 내비게이션 메뉴 만드는 방법

버튼을 클릭하면 화면 전체 너비와 높이를 덮는 사이드 내비게이션이 부드럽게 열립니다.

CSS와 JavaScript로 전체 화면 오버레이 내비게이션 메뉴 만드는 방법

코드 핵심 포인트

.sideNav 스타일: 초기 width를 0으로 설정하고 position: fixed로 화면에 고정합니다. transition: 0.5s를 적용해 메뉴가 열리고 닫힐 때 부드러운 애니메이션 효과가 나타납니다.
overflow-x: hidden: 메뉴가 닫혀 있는 상태에서 링크 텍스트가 화면 밖으로 노출되지 않도록 처리합니다.
showNav() 함수: 열기 버튼 클릭 시 .sideNav의 width를 100%로 변경하여 화면 전체를 채웁니다.
hideNav() 함수: 닫기 버튼 클릭 시 width를 다시 0으로 되돌려 메뉴를 숨깁니다.

이처럼 CSS와 몇 줄의 JavaScript만으로도 모바일 앱 같은 몰입감 있는 전체 화면 내비게이션 메뉴를 손쉽게 만들 수 있습니다.