![](https://maz.kr/wp-content/uploads/2024/04/howto-js-dropdown-thumbnail.png)
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'); } } } }기본 예시예제 보기오른쪽 정렬 드롭다운
기본 예시예제 보기Navbar의 드롭다운 메뉴
기본 예시예제 보기검색(필터) 드롭다운
기본 예시예제 보기참고
W3C School - How TO - Clickable Dropdown