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">Hello World!</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="挪威" style="width:20%">
<div class="w3-dropdown-content" style="width:300px">
<img src="img_snowtops.jpg" alt="挪威" style="width:100%">
</div>
</div>
卡片下拉菜单
将鼠标移到下面任一城市上
伦敦
伦敦是英格兰的首都。
它是英国人口最多的城市，都市区人口超过900万。
东京
东京是日本的首都。
1300万居民。
示例
<div class="w3-dropdown-hover">伦敦
<div class="w3-dropdown-content w3-card-4" style="width:250px">
<img src="img_london.jpg" alt="伦敦" style="width:100%">
<div class="w3-container">
<p>伦敦是英格兰的首都。</p>
<p>它是英国人口最多的城市。</p>
</div>
</div>
</div>
动画下拉菜单
使用任何w3-animate-类 来淡入淡出、缩放或滑动下拉菜单内容
示例
<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>
