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>
