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>
图片下拉菜单
将鼠标移到图片上:
实例
<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 is the capital city of England.
It is the most populous city in the United Kingdom, 拥有超过 900 万居民的大都市区。
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>
