CSS로 드롭다운 메뉴가 있는 반응형 내비게이션 바 만드는 방법

개요

웹사이트에서 화면 크기에 따라 자동으로 레이아웃이 조정되는 반응형 내비게이션 바(네비게이션 바)는 필수적인 UI 요소입니다. 이 글에서는 순수 HTML, CSS, 그리고 약간의 JavaScript만을 사용하여 드롭다운 메뉴와 햄버거 아이콘까지 갖춘 반응형 내비게이션 바를 만드는 방법을 단계별로 살펴봅니다.

전체 예제 코드

다음은 드롭다운 메뉴가 포함된 반응형 내비게이션 바의 완성된 코드입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
*,*::after,*::before{
    box-sizing: border-box;
}
.menu-btn {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    background-color: #040008;
    color: white;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: none;
    width: 100%;
}
.dropdown-menu {
    position: relative;
    display: inline-block;
}
.menu-content {
    display: none;
    position: absolute;
    width: 100%;
    background-color: #017575;
    min-width: 160px;
    z-index: 1;
}
nav{
    background-color: #017575;
    width: 100%;
}
.links,.links-hidden{
    display: inline-block;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    padding: 20px;
}
.links-hidden:hover,.links:hover {
    background-color: rgb(8, 107, 46);
}
.dropdown-menu:hover .menu-content {
    display: block;
}
.dropdown-menu:hover .menu-btn {
    background-color: #3e8e41;
}
.hamburger {
    color: white;
    font-weight: bolder;
    display: none;
}
@media screen and (max-width: 880px) {
       nav a:not(:first-child) {
        display: none;
    }
    nav a.hamburger {
        float: right;
        display: block;
        padding: 12px;
    }
    .dropdown-menu{
        display: none;
    }
    nav.openNav a.hamburger {
        position: relative;
    }
    nav.openNav a {
        float: none;
        display: block;
        text-align: center;
    }
}
nav.openNav div.dropdown-menu{
    display: block;
    width: 100%;
}
</style>
</head>
<body>
<nav>
<a class="links" href="#">HOME</a>
<a class="links" href="#">EMPLOYEES</a>
<a class="links" href="#">CAREER</a>
<a class="links" href="#">Our History</a>
<a class="links" href="#">Fund Us</a>
<a class="links" href="#">More Info</a>
<div class="dropdown-menu">
<button class="menu-btn">Open <</button>
<div class="menu-content">
<a class="links-hidden" href="#">Contact Us</a>
<a class="links-hidden" href="#">Visit Us</a>
<a class="links-hidden" href="#">About Us</a>
</div>
</div>
<a class="hamburger">☰</a>
</nav>
<script>
var x = document.getElementsByTagName("nav")[0];
function toggleNav() {
    if (x.className === "") {
        x.className = " openNav";
    } else {
        x.className = "";
    }
}
document.querySelector(".hamburger").addEventListener("click", toggleNav);
</script>
</body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 결과가 출력됩니다.

CSS로 드롭다운 메뉴가 있는 반응형 내비게이션 바 만드는 방법

화면 너비를 880px 이하로 줄였을 때

미디어 쿼리(@media screen and (max-width: 880px))에 의해 일반 링크들은 숨겨지고, 오른쪽 상단에 햄버거 아이콘(☰)만 표시됩니다.

CSS로 드롭다운 메뉴가 있는 반응형 내비게이션 바 만드는 방법

햄버거 메뉴를 열고 드롭다운을 펼쳤을 때

햄버거 아이콘을 클릭하면 openNav 클래스가 추가되어 모든 메뉴 항목이 세로로 정렬되어 나타나며, 드롭다운 버튼도 함께 표시됩니다.

CSS로 드롭다운 메뉴가 있는 반응형 내비게이션 바 만드는 방법

핵심 동작 원리 정리

:hover 가상 클래스: 마우스를 드롭다운 영역에 올리면 .menu-content가 display: block으로 전환되어 하위 메뉴가 나타납니다.
미디어 쿼리: 화면 너비가 880px 이하일 때 일반 링크를 숨기고 햄버거 아이콘을 표시하여 모바일 환경에 대응합니다.
JavaScript 토글: 햄버거 아이콘 클릭 시 openNav 클래스를 추가·제거하여 메뉴를 열고 닫습니다.
z-index 활용: 드롭다운 메뉴가 다른 콘텐츠 위에 겹쳐 보이도록 z-index: 1을 설정했습니다.

이처럼 CSS의 미디어 쿼리와 가상 클래스, 그리고 간단한 JavaScript만으로도 별도의 프레임워크 없이 실용적인 반응형 내비게이션 바를 손쉽게 구현할 수 있습니다.