어떻게 만들지?: 클릭 가능한 드롭다운 메뉴

CSS와 JavaScript를 사용하여 클릭 가능한 드롭다운 메뉴를 만들어보세요.

클릭 가능한 드롭다운 메뉴 만들기

사용자가 버튼을 클릭할 때 나타나는 드롭다운 메뉴를 만듭니다.

첫 번째 단계 - HTML 추가:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">링크 1</a>
    <a href="#">링크 2</a>
    <a href="#">링크 3</a>
  </div>
</div>

예시 설명:

드롭다운 메뉴를 여는 데 사용할 수 있는 어떤 요소든 사용할 수 있습니다. 예를 들어 <button>、<a> 또는 <p> 요소.

드롭다운 메뉴를 생성하기 위해 컨테이너 요소（예: <div>）를 사용하고, 그 안에 드롭다운 링크를 추가합니다.

버튼과 <div>를 <div> 요소로 감싸서 드롭다운 메뉴를 CSS로 정위치할 수 있습니다.

第二步 - CSS 추가하기:

/* 드롭다운 버튼 */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* 마우스 오버와 포커스 시 드롭다운 메뉴 버튼 */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* 컨테이너 <div> - 드롭다운 메뉴 내용을 정위치하기 위해 필요한 요소 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* 드롭다운 메뉴 내용（기본적으로 숨김） */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  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: #ddd;}
/*下拉菜单位置 표시（사용자가下拉菜单位置 버튼을 클릭할 때, JS를 사용하여 이 클래스를 .dropdown-content 컨테이너에 추가합니다）*/
.show {display:block;}

예시 설명:

下拉菜单位置 버튼에 배경색, 내간격, 마우스 오버 효과 등의 스타일을 설정합니다。

.dropdown 클래스를 사용하여 position:relative를 사용하여,下拉菜单位置 내용을下拉菜单位置 버튼 아래에 배치하고 싶을 때（사용 position:absolute），이는 필수입니다。

.dropdown-content 클래스는 실제下拉菜单位置를 포함합니다. 기본적으로 숨겨져 있으며 마우스 오버 시 표시됩니다(아래 참조). 주의하세요, 최소 너비는 160px로 설정되어 있습니다. 필요에 따라 값을 변경할 수 있습니다. 힌트:下拉菜单位置의 내용의 너비가下拉菜单位置 버튼과 같게 되기를 원하면 너비를 100%（작은 스크린에서 사용 overflow:auto 를 통해 스크롤을 활성화합니다）。

우리는 경계선 대신 사용합니다 box-shadow 속성을 사용하여下拉菜单位置이 "카드"처럼 보이게 합니다. 또한 사용합니다 z-index 下拉菜单位置을 다른 요소의 앞에 배치합니다。

세 번째 단계 - JavaScript 추가:

/* 사용자가 버튼을 클릭할 때,下拉菜单位置의 숨김과 표시 상태를 전환합니다 */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// 사용자가下拉菜单位置 외부를 클릭하면下拉菜单位置를 닫습니다
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

직접 시험해보세요

관련 페이지

강의:CSS 드롭다운 메뉴

강의:호버링 드롭다운 메뉴 어떻게 만들 수 있습니까