커튼 내비게이션(Curtain Navigation) 메뉴는 화면 가장자리에서 부드럽게 슬라이드되어 열리는 사이드 메뉴로, 버튼 하나만 눌러도 전체 화면을 덮으며 주요 메뉴 항목을 보여주는 UI 패턴입니다. 모바일 웹이나 미니멀한 디자인의 웹사이트에서 자주 활용됩니다.
다음은 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 {
height: 100vh;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(46, 218, 195,0.4);
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;
text-align: center;
}
.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>
<div class="main-content">
<h1>Header One</h1>
<p> Some paragraph text</p>
<h2> Header Two</h2>
<p> Some more paragraph text</p>
</div>
<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>
코드 동작 원리
- .sideNav:
position: fixed로 화면 왼쪽에 고정되며, 초기 너비가0으로 설정되어 평소에는 보이지 않습니다.transition: 0.5s속성 덕분에 너비가 변할 때 부드러운 애니메이션 효과가 적용됩니다. - showNav() 함수: 열기 버튼을 클릭하면 내비게이션의 너비를
100%로 변경하여 화면 전체를 커튼처럼 덮습니다. - hideNav() 함수: 닫기 버튼(×)을 클릭하면 너비를 다시
0으로 되돌려 메뉴를 숨깁니다. - addEventListener(): 각 버튼에 클릭 이벤트를 연결하여 사용자 동작에 반응하도록 처리합니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과가 나타납니다.
화면의 'sideNav 열기' 버튼을 클릭하면 아래와 같이 내비게이션 메뉴가 좌측에서 슬라이드되며 열립니다.
