W3.CSS 下拉菜单


W3.CSS 下拉列表类

W3.CSS 提供了以下下拉列表类:

定义
w3-dropdown-hover 可悬停的下拉元素
w3-dropdown-content 要显示的下拉部分
w3-dropdown-click 可点击的下拉元素

Dropdown 下拉元素

w3-dropdown-hover 类定义了一个可悬停的下拉元素。

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>

亲自试一试 »

悬停元素和下拉内容元素都可以是任何 HTML 元素。

在上面的示例中,悬停元素是一个 <button>,下拉内容是一个 <div>。

在下一个示例中,悬停元素是 <p>,下拉内容是 <span>:

实例

<p class="w3-dropdown-hover">Hover over me!
  <span class="w3-dropdown-content w3-green">Hello World!</span>
</p>

亲自试一试 »


下拉菜单

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>

亲自试一试 »


图片下拉菜单

将鼠标移到图片上:

Monterosso

Norway

实例

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

亲自试一试 »


卡片下拉菜单

将鼠标移到下面的城市之一:

London
London

London is the capital city of England.

It is the most populous city in the United Kingdom, 拥有超过 900 万居民的大都市区。

Tokyo
Tokyo

Tokyo is the capital city of Japan.

13 million inhabitants.

实例

<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-classes 在下拉列表内容中淡入淡出、缩放或滑动:

实例

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

亲自试一试 »