W3.CSS Dropdowns (下拉菜单)
W3.CSS Dropdown 类
W3.CSS提供以下下拉类：
| 类 | 定义 |
|---|---|
| W3-下拉悬停 | 可悬停的下拉元素 |
| w3-dropdown-content | 要显示的下拉部分 |
| w3-下拉单击 | 可点击的下拉元素 |
悬停下拉菜单
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">链接 1</a>
<a href="#" class="w3-bar-item w3-button">链接 2</a>
<a href="#" class="w3-bar-item w3-button">链接 3</a>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
可悬浮元素和下拉内容元素都可以是任何 HTML 元素。
在上面的示例中，悬停元素是 <button>，下拉内容是 <div>。
在下一个示例中，悬停元素是 <p>，下拉内容是 <span>：
实例
<span class="w3-dropdown-content w3-green">你好 W3CSchool!</span>
</p>
尝试一下 »
点击“尝试一下”按钮查看在线实例
导航栏中的下拉菜单
实例
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">主页</a>
<a href="#" class="w3-bar-item w3-button">链接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">链接 1</a>
<a href="#" class="w3-bar-item w3-button">链接 2</a>
<a href="#" class="w3-bar-item w3-button">链接 3</a>
</div>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
注意：在本教程的后面，您将了解有关导航栏的更多信息。
可点击的下拉菜单
实例
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button w3-black">点击我!</button>
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">链接 1</a>
<a href="#" class="w3-bar-item w3-button">链接 2</a>
<a href="#" class="w3-bar-item w3-button">链接 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-content w3-card-4" style="width:250px">
<img src="img_london.jpg" alt="London" style="width:100%">
<div class="w3-container">
<p>伦敦是英格兰的首都。</p>
<p>它是英国人口最多的城市。</p>
</div>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
动画下拉菜单
实例
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button">点击我！</button>
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-animate-zoom">
<a href="#" class="w3-bar-item w3-button">链接 1</a>
<a href="#" class="w3-bar-item w3-button">链接 2</a>
<a href="#" class="w3-bar-item w3-button">链接 3</a>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
右对齐下拉菜单
实例
<button class="w3-button">下拉</button>
<div class="w3-dropdown-content w3-bar-block w3-border" style="right:0">
<a href="#" class="w3-bar-item w3-button">链接 1</a>
<a href="#" class="w3-bar-item w3-button">链接 2</a>
<a href="#" class="w3-bar-item w3-button">链接 3</a>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例