W3.CSS Dropdowns (下拉菜单)

2020-12-01 11:11 更新

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>:

实例

<p class="w3-dropdown-hover">Hover over me!
  <span class="w3-dropdown-content w3-green">你好 W3CSchool!</span>
</p>

尝试一下 »
点击“尝试一下”按钮查看在线实例

导航栏中的下拉菜单

w3-dropdown-hover 类是完美的创造与下拉 menues 导航栏:

实例

<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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

注意:在本教程的后面,您将了解有关导航栏的更多信息。


可点击的下拉菜单

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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

卡片式下拉菜单

实例

<div class="w3-dropdown-hover">London
  <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>

尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号