
w3.css
드롭다운
W3.CSS 드롭다운 클래스
W3.CSS는 다음과 같은 드롭다운 클래스를 제공한다.
Class | Defines |
---|---|
w3-dropdown-hover | 호버링 가능한 드롭다운 요소 |
w3-dropdown-content | 표시할 드롭다운 부분 |
w3-dropdown-click | 클릭 가능한 드롭다운 요소 |
드롭다운 요소
w3 -dropdown-hover 클래스는 hoverable 드롭다운 요소를 정의한다.
w3 -dropdown-content 클래스는 표시할 드롭다운 콘텐츠를 정의한다.
예제
<div class="w3-dropdown-hover"> <button class="w3-button">Hover Over Me!</button> <div class="w3-dropdown-content w3-bar-block w3-border"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div>
hoverable 요소와 드롭다운 콘텐츠 요소는 모두 HTML 요소일 수 있다.
위의 예에서 hover 요소는 <button>이고 드롭다운 콘텐츠는 <div>다.
다음 예에서 hover 요소는 <p>이고 드롭다운 콘텐츠는 <span>다.
예제
Hover over me! Hello World!
메뉴 드롭다운
w3-dropdown-hover 클래스는 드롭다운 메뉴가 있는 탐색 모음을 만드는 데 적합하다.
예제
<div class="w3-bar w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <div class="w3-dropdown-hover"> <button class="w3-button">Dropdown</button> <div class="w3-dropdown-content w3-bar-block w3-card-4"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div>
클릭 가능한 드롭다운
w3 -dropdown-click 클래스는 클릭 가능한 드롭다운 요소를 생성한다.
이 클래스를 사용하면 드롭다운이 JavaScript에 의해 열린다.
예제
<div class="w3-dropdown-click"> <button onclick="myFunction()" class="w3-button w3-black">Click Me!</button> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> <script> function myFunction() { var x = document.getElementById("Demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script>
이미지 드롭다운
이미지 위로 마우스를 이동한다.


예제
<div class="w3-dropdown-hover"> <img src="img_snowtops.jpg" alt="Norway" style="width:20%"> <div class="w3-dropdown-content" style="width:300px"> <img src="img_snowtops.jpg" alt="Norway" style="width:100%"> </div> </div>
카드 드롭다운
아래 도시 중 하나 위로 마우스를 이동한다.
런던

런던은 영국의 수도이다.
영국에서 가장 인구가 많은 도시로, 대도시 지역에는 900만 명이 넘는 주민이 살고 있습니다.
도쿄

도쿄는 일본의 수도이다.
주민 1300만명.
예제
<div class="w3-dropdown-hover">London <div class="w3-dropdown-content w3-card-4" style="width:250px"> <img src="img_london.jpg" alt="London" style="width:100%"> <div class="w3-container"> <p>London is the capital city of England.</p> <p>It is the most populous city in the UK.</p> </div> </div> </div>
애니메이션 드롭다운
w3-animate- 클래스 중 하나를 사용하여 드롭다운 콘텐츠를 페이드, 확대/축소 또는 슬라이드할 수 있다.
예제
<div class="w3-dropdown-click"> <button onclick="myFunction()" class="w3-button">Click Me</button> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-animate-zoom"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div>
기본 예시
예제 보기오른쪽 정렬 드롭다운
드롭다운을 오른쪽으로 띄우려면 w3-right 클래스를 사용한다.
CSS를 사용하여 드롭다운 콘텐츠의 위치를 지정한다( right:0 은 드롭다운 메뉴를 왼쪽에서 오른쪽이 아닌 오른쪽에서 왼쪽으로 이동하게 한다).
예제
<div class="w3-dropdown-hover w3-right"> <button class="w3-button">Dropdown</button> <div class="w3-dropdown-content w3-bar-block w3-border" style="right:0"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div>
참고
W3C School - W3.CSS Dropdowns