How To - 클릭 가능한 드롭다운

w3.css

클릭 가능한 드롭다운

CSS와 JavaScript를 사용하여 클릭 가능한 드롭다운 메뉴를 만드는 방법을 알아보자.

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

사용자가 버튼을 클릭하면 나타나는 드롭다운 메뉴를 만든다.

1단계) HTML 추가

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

드롭다운 메뉴를 열려면 <button>, <a> 또는 <p> 요소와 같은 요소를 사용하자.

컨테이너 요소(예: <div>)를 사용하여 드롭다운 메뉴를 만들고 그 안에 드롭다운 링크를 추가하자.

CSS를 사용하여 드롭다운 메뉴의 위치를 올바르게 지정하려면 버튼과 <div> 주위에 <div> 요소를 래핑한다.

2단계) CSS 추가

/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container  - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.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;
}

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

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

배경 색상, 패딩, 호버 효과 등으로 드롭다운 버튼을 스타일링했다.

.dropdown 클래스는 position:relative를 사용하는데, 이는 드롭다운 콘텐츠를 드롭다운 버튼 바로 아래에 배치할 때 필요하다(position:absolute 사용).

.dropdown-content 클래스는 실제 드롭다운 메뉴를 유지한다.
기본적으로 숨겨져 있으며 호버(아래 참조)에 표시된다.
최소 너비는 160px로 설정되어 있다. 자유롭게 변경할 수 있다.
⭐ 드롭다운 콘텐츠의 너비를 드롭다운 버튼만큼 크게 하려면 너비를 100%(및 오버플로:auto로 설정하여 작은 화면에서 스크롤할 수 있도록 하자.

우리는 테두리를 사용하는 대신 상자 그림자 속성을 사용하여 드롭다운 메뉴를 “카드”처럼 보이게 만들었다.
우리는 또한 z-index를 사용하여 드롭다운을 다른 요소들 앞에 배치한다.

3단계) 자바스크립트 추가

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
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');
      }
    }
  }
}

기본 예시

예제 보기