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>
body {
margin: 0px;
padding: 0px;
}
nav {
position: relative;
top: 0;
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
.selected {
background-color: rgb(0, 18, 43);
}
.hamburger {
color: white;
font-weight: bolder;
display: none;
}
@media screen and (max-width: 600px) {
nav a:not(:first-child) {
display: none;
}
nav a.hamburger {
float: right;
display: block;
padding: 12px;
}
nav.openNav a.hamburger {
position: absolute;
right: 0;
bottom: 0;
}
nav.openNav a {
float: none;
display: block;
text-align: center;
}
}
</style>
</head>
<body>
<nav class="bottomNav">
<a class="links selected" href="#"> Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
<a class="hamburger">☰</a>
</nav>
<div>
<p>Some random text here </p>
<p>Some random text here </p>
</div>
<script>
function toggleNav() {
var x = document.getElementsByTagName("nav")[0];
if (x.className === "bottomNav") {
x.className += " openNav";
} else {
x.className = "bottomNav";
}
}
document.querySelector(".hamburger").addEventListener("click", toggleNav);
</script>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 상단 탐색 메뉴가 표시됩니다.
브라우저 창의 너비를 600px 이하로 줄이거나 실제 모바일 기기에서 접속하면, 대부분의 메뉴 항목이 숨기고 오른쪽에 햄버거 버튼(☰)만 나타나는 것을 확인할 수 있습니다.
이 상태에서 햄버거 버튼을 클릭하면 숨겨져 있던 메뉴 항목들이 세로 방향으로 펼쳐지며, 다시 클릭하면 메뉴가 접힙니다.
동작 원리 정리
- 미디어 쿼리(@media screen and (max-width: 600px)): 화면 너비가 600px 이하일 때 첫 번째 링크(Home)를 제외한 모든 링크를 display: none으로 감추고, 평소에는 보이지 않던 .hamburger 버튼을 float: right와 display: block으로 화면 우측에 표시합니다.
- openNav 클래스: nav 요소에 openNav 클래스가 부여되면 모든 링크가 세로로 정렬되어 전체 메뉴가 펼치고, 햄버거 버튼은 position: absolute로 우측 하단에 고정됩니다.
- toggleNav() 함수: 햄버거 버튼 클릭 시 nav 요소의 className 값을 검사하여 openNav 클래스를 추가하거나 제거함으로써 메뉴를 여닫는 토글(toggle) 역할을 수행합니다.
이처럼 몇 줄의 CSS와 간단한 JavaScript만으로도 별도의 프레임워크 없이 모바일 친화적인 반응형 내비게이션을 구축할 수 있습니다. 필요에 따라 전환 애니메이션(transition)이나 스크롤 고정(position: fixed) 등을 추가하면 더욱 완성도 높은 메뉴를 만들 수 있습니다.