jQuery로 드롭다운 메뉴 만들기 – 초보자도 가능한 간단한 실습 예제

 

 

이번 포스팅 에서는 jQuery를 사용하여
**드롭다운 메뉴(dropdown menu)**를 만드는 방법을 쉽게 설명드리겠습니다.

웹사이트 메뉴 구성은 사용자 경험에 큰 영향을 주는 요소인데요,
초보자 분들도 jQuery만 있으면
심플하면서도 부드럽게 작동하는 드롭다운 메뉴를 쉽게 만들 수 있습니다!

---

📍 1. jQuery란?

jQuery는 JavaScript를 쉽게 사용할 수 있도록 도와주는 자바스크립트 라이브러리입니다.
복잡한 DOM 조작이나 애니메이션, 이벤트 처리 등을 간단한 코드로 구현할 수 있어
많은 웹사이트에서 활용되고 있습니다.

---

📍 2. 기본 HTML 구조 만들기

<ul class="menu">
  <li>메인메뉴 1
    <ul class="submenu">
      <li>서브메뉴 1-1</li>
      <li>서브메뉴 1-2</li>
    </ul>
  </li>
  <li>메인메뉴 2
    <ul class="submenu">
      <li>서브메뉴 2-1</li>
      <li>서브메뉴 2-2</li>
    </ul>
  </li>
</ul>

여기서 .submenu는 처음엔 보이지 않도록 CSS에서 숨겨두겠습니다.

---

📍 3. 기본 CSS 설정

.submenu {
  display: none;
}
.menu > li {
  position: relative;
  cursor: pointer;
}
.menu > li:hover .submenu {
  display: block;
}

CSS만으로도 단순한 호버 효과는 가능하지만,
우리는 jQuery로 클릭 시 열리는 방식을 구현해보겠습니다!

---

📍 4. jQuery로 드롭다운 동작 구현

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function () {
    $('.menu > li').click(function () {
      $(this).find('.submenu').slideToggle(); // 서브메뉴 열기/닫기
      $(this).siblings().find('.submenu').slideUp(); // 다른 메뉴 닫기
    });
  });
</script>

 

✔ 핵심 포인트:

• .slideToggle() → 서브메뉴가 열리고 닫힘
• .siblings() → 다른 메뉴는 자동으로 닫기

---

📍 5. 개선 팁

• 메뉴 외 영역 클릭 시 서브메뉴 닫기
• 아이콘 또는 애니메이션 추가
• 모바일에서 터치 대응 코드 추가

---

✅ 마무리하며

드롭다운 메뉴는 jQuery를 활용하면
간단한 코드만으로도 깔끔하게 구현할 수 있습니다.
실제 프로젝트에서 자주 사용하는 기능이니,
이번 기회에 꼭 한번 실습해보시길 추천드립니다 😊