W3.CSS 下拉菜单
W3.CSS 下拉列表类
W3.CSS 提供了以下下拉类：
| 班级 | 定义 |
|---|---|
| w3-下拉悬停- | 可悬停的下拉元素 |
| w3-下拉内容 | 要显示的下拉部分 |
| w3-下拉-点击 | 可点击的下拉元素 |
下拉元素
这 w3-下拉悬停- 类定义一个可悬停的下拉元素。
这 w3-下拉内容 类定义要显示的下拉内容。
例子
<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>。</div></button>
在下一个示例中，悬停元素是<p> ，下拉内容为<span>：</span>
例子
<p class="w3-dropdown-hover">悬停在我上方！
<span class="w3-dropdown-content w3-green">你好世界！</span>
</p>
菜单下拉菜单
这 w3-下拉悬停- 类非常适合创建带有下拉菜单的导航栏：
例子
<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-下拉-点击 类创建一个可点击的下拉元素。
使用此类，下拉菜单可通过 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>
函数 myFunction() {
var x = document.getElementById("演示");
如果 (x.className.indexOf("w3-show") == -1) {
x.className += “w3-show”;
} 别的 {
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-动画-类 淡入、放大或滑动下拉菜单内容：
例子
<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-右 类将下拉菜单浮动到右侧。使用 CSS 定位下拉菜单内容（右：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>
