CSS와 JavaScript로 클릭 시 열리고 닫히는 드롭다운 메뉴 만들기

웹 페이지에서 버튼을 클릭했을 때 메뉴가 열리고, 다시 클릭하면 닫히는 클릭형 드롭다운 메뉴는 자주 사용되는 UI 요소입니다. 아래 예제에서는 CSS로 스타일을 지정하고 JavaScript의 addEventListener를 활용해 클릭 이벤트를 처리하는 방법을 소개합니다.

전체 예제 코드

다음은 CSS와 JavaScript를 사용하여 클릭 가능한 드롭다운 메뉴를 구현한 완전한 코드입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.menu-btn {
    background-color: #7e32d4;
    color: white;
    padding: 16px;
    font-size: 20px;
    font-weight: bolder;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: none;
}
.dropdown-menu {
    position: relative;
    display: inline-block;
}
.menu-content {
    display: none;
    position: absolute;
    background-color: #017575;
    min-width: 160px;
    z-index: 1;
}
.links {
    color: rgb(255, 255, 255);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid black;
}
.links:hover {
    background-color: rgb(8, 107, 46);
}
.dropdown-menu:hover .menu-btn {
    background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>아래 드롭다운 버튼을 클릭하여 메뉴를 열거나 닫아보세요</h2>
<div class="dropdown-menu">
<button class="menu-btn">열기 <</button>
<div class="menu-content">
<a class="links" href="#">문의하기</a>
<a class="links" href="#">오시는 길</a>
<a class="links" href="#">소개</a>
</div>
</div>
<script>
let dropdownBtn = document.querySelector('.menu-btn');
let menuContent = document.querySelector('.menu-content');
dropdownBtn.addEventListener('click',()=>{
    if(menuContent.style.display===""){
        menuContent.style.display="block";
    } else {
        menuContent.style.display="";
    }
})
</script>
</body>
</html>

출력 결과

위 코드를 브라우저에서 실행하면 다음과 같이 보라색 '열기' 버튼이 표시됩니다.

CSS와 JavaScript로 클릭 시 열리고 닫히는 드롭다운 메뉴 만들기

'열기' 버튼을 클릭하면 다음과 같이 메뉴 항목들이 펼쳐집니다. 각 링크에 마우스를 올리면 배경색이 초록색으로 변경되어 호버 효과도 확인할 수 있습니다.

CSS와 JavaScript로 클릭 시 열리고 닫히는 드롭다운 메뉴 만들기

코드 동작 원리

이 드롭다운 메뉴가 작동하는 핵심 원리는 다음과 같습니다.

CSS 부분: .menu-content에 기본적으로 display: none을 적용해 메뉴를 숨깁니다. 또한 position: absolute와 z-index: 1을 사용해 메뉴가 열렸을 때 다른 콘텐츠 위에 표시되도록 합니다.
JavaScript 부분: 버튼에 클릭 이벤트 리스너를 등록하고, 클릭 시마다 display 속성 값을 확인하여 block(표시)과 빈 값(숨김) 사이를 전환합니다. 이를 통해 버튼을 누를 때마다 메뉴가 열리고 닫힙니다.
호버 효과: :hover 선택자를 활용해 링크에 마우스를 올리면 배경색이 바뀌고, 버튼에 마우스를 올리면 색상이 변경되어 사용자 경험을 향상시킵니다.

이 방식은 외부 라이브러리 없이 순수 HTML, CSS, JavaScript만으로 간단하게 구현할 수 있어 가볍고 유지보수가 쉽다는 장점이 있습니다. 필요에 따라 애니메이션 효과나 외부 영역 클릭 시 자동으로 닫히는 기능을 추가하여 더욱 완성도 높은 드롭다운 메뉴로 발전시킬 수 있습니다.