여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 드롭다운
w3.css – 드롭다운
3개월전 작성
4개월전 수정

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>
참고
Mingg`s Diary
밍구
공부 목적 블로그