[javascript] jQuery를 사용한 드롭다운 메뉴 구현하기

18 Dec 2023

javascript

웹 개발에서 드롭다운 메뉴는 사용자 인터페이스를 향상시키고 사용자 경험을 향상시키는 데 중요합니다. jQuery를 활용하여 간단한 드롭다운 메뉴를 구현하는 방법을 알아보겠습니다.

HTML 구조 설정

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dropdown Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="dropdown">
    <button class="dropbtn">메뉴</button>
    <div class="dropdown-content">
      <a href="#">링크 1</a>
      <a href="#">링크 2</a>
      <a href="#">링크 3</a>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS 스타일 설정

/* styles.css */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

jQuery를 사용한 드롭다운 효과 구현

// script.js
$(document).ready(function(){
  $(".dropbtn").click(function(){
    $(".dropdown-content").slideToggle();
  });
});

위 예제의 경우, 사용자가 “메뉴” 버튼을 클릭하면 드롭다운 메뉴가 나타나거나 사라지는 효과를 보여줍니다.

이것으로 jQuery를 이용한 간단한 드롭다운 메뉴를 구현하는 방법을 소개했습니다. jQuery를 사용하면 간단하게 인터랙티브한 웹 요소를 구현할 수 있으며, 사용자가 더 좋은 경험을 할 수 있도록 도와줍니다.

더 많은 jQuery 기능 및 사용법은 공식 홈페이지(https://jquery.com/)에서 확인할 수 있습니다.