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>다.

예제

메뉴 드롭다운

w3-dropdown-hover 클래스는 드롭다운 메뉴가 있는 탐색 모음을 만드는 데 적합하다.

집 링크 1

예제

<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>

카드 드롭다운

아래 도시 중 하나 위로 마우스를 이동한다.

예제

<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

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기