W3.CSS 下拉菜单
W3.CSS 下拉菜单类
W3.CSS 提供以下下拉菜单类
| 类 | 定义 |
|---|---|
| w3-dropdown-hover | 可悬停的下拉菜单元素 |
| w3-dropdown-content | 要显示的下拉菜单内容 |
| w3-dropdown-click | 可点击的下拉菜单元素 |
下拉菜单元素
w3-dropdown-hover 类定义了一个可悬停的下拉菜单元素。
w3-dropdown-content 类定义了要显示的下拉菜单内容。
示例
<div class="w3-dropdown-hover">
<button class="w3-button">悬停在我上面！</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>
示例
<p class="w3-dropdown-hover">悬停在我上面！
<span class="w3-dropdown-content w3-green">你好世界！</span>
</p>
菜单下拉菜单
w3-dropdown-hover 类非常适合创建带有下拉菜单的导航栏
示例
<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">下拉菜单</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>
自己试试 »
注意：您将在本教程的后面学习更多关于导航栏的内容。
可点击的下拉菜单
w3-dropdown-click 类创建一个可点击的下拉菜单元素。
使用此类，下拉菜单将通过 JavaScript 打开
示例
<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>
卡片下拉菜单
将鼠标移到下面的一个城市上
London
伦敦是英格兰的首都。
它是英国人口最多的城市，都会区超过 900 万居民。
东京
东京是日本的首都。
1300 万居民。
示例
<div class="w3-dropdown-hover">伦敦
<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>
动画下拉菜单
使用任何 w3-animate-class 来淡入、缩放或滑动下拉菜单内容
示例
<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>
右对齐下拉菜单
使用 w3-right 类将下拉菜单向右浮动。使用 CSS 来定位下拉菜单内容 (right:0 会使下拉菜单从右到左而不是从左到右显示)
示例
<div class="w3-dropdown-hover w3-right">
<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>
