web前端学习（二十八）——CSS3下拉菜单的相关设置

2022-06-15 624

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： web前端学习（二十八）——CSS3下拉菜单的相关设置

1.开篇

HTML 部分：

我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。

使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160px。你可以随意修改它。注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

如果你想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码 right: 0;（left：0;）

2.基本下拉菜单

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CSS简单学习</title>
    <style type="text/css">
      .dropdown {
        position: relative;
        display: inline-block;
      }
      .dropdown-content {
        position: absolute;
        display: none;
        min-width: 160px;
        padding: 12px 16px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        background-color: beige;
      }
      .dropdown:hover .dropdown-content {
        display: block;
      }
    </style>
  </head>
  <body>
    <h2>鼠标移动后出现下拉菜单</h2>
    <p>将鼠标移动到指定元素上就能看到下拉菜单</p>
    <div class="dropdown">
      <span>鼠标移动到我这里！！！</span>
      <div class="dropdown-content">
        <p>HTML</p>
        <p>CSS</p>
        <p>JavaScript</p>
      </div>
    </div>
  </body>
</html>

3.完善的下拉菜单

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CSS简单学习</title>
    <style type="text/css">
      /* 下拉按钮的样式 */
      .dropbtn {
        border: none;
        cursor: pointer;
        padding: 16px;
        font-size: 16px;
        background-color: green;
      }
      /* 容器<div>需要定位下拉内容 */
      .dropdown {
        position: relative;
        display: inline-block;
      }
      /* 下拉内容（默认隐藏） */
      .dropdown-content {
        position: absolute;
        display: none;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        background-color: whitesmoke;
      }
      /* 下拉菜单的链接 */
      .dropdown-content a {
        display: block;
        padding: 12px 16px;
        text-decoration: none;
        color: black;
      }
      /* 鼠标移到链接上之后，修改连接的背景颜色 */
      .dropdown-content a:hover {
        background-color: antiquewhite;
      }
      /* 鼠标移动到下拉按钮上之后，显示下拉菜单 */
      .dropdown:hover .dropdown-content {
        display: block;
      }
      /* 当下拉菜单显示之后，修改下拉按钮的背景颜色 */
      .dropdown:hover .dropbtn {
        background-color: darkgreen;
      }
    </style>
  </head>
  <body>
    <div class="dropdown">
      <button class="dropbtn">下拉菜单</button>
      <div class="dropdown-content">
        <a href="https://www.tencent.com" target="_blank">腾讯</a>
        <a href="https://www.1688.com" target="_blank">阿里巴巴</a>
        <a href="https://www.huawei.com" target="_blank">华为</a>
      </div>
    </div>
  </body>
</html>

4.下拉菜单的对齐方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CSS简单学习</title>
    <style type="text/css">
      /* 下拉按钮的样式 */
      .dropbtn {
        border: none;
        cursor: pointer;
        padding: 16px;
        font-size: 16px;
        background-color: green;
      }
      /* 容器<div>需要定位下拉内容 */
      .dropdown {
        position: relative;
        display: inline-block;
      }
      /* 下拉内容（默认隐藏） */
      .dropdown-content {
        position: absolute;
        display: none;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        right: 0;
        background-color: whitesmoke;
      }
      /* 下拉菜单的链接 */
      .dropdown-content a {
        display: block;
        padding: 12px 16px;
        text-decoration: none;
        color: black;
      }
      /* 鼠标移到链接上之后，修改连接的背景颜色 */
      .dropdown-content a:hover {
        background-color: antiquewhite;
      }
      /* 鼠标移动到下拉按钮上之后，显示下拉菜单 */
      .dropdown:hover .dropdown-content {
        display: block;
      }
      /* 当下拉菜单显示之后，修改下拉按钮的背景颜色 */
      .dropdown:hover .dropbtn {
        background-color: darkgreen;
      }
    </style>
  </head>
  <body>
    <h2>下拉内容的对齐方式</h2>
    <p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p>
    <div class="dropdown" style="float: left;">
      <button class="dropbtn">下拉菜单（左）</button>
      <div class="dropdown-content">
        <a href="https://www.tencent.com" target="_blank">腾讯</a>
        <a href="https://www.1688.com" target="_blank">阿里巴巴</a>
        <a href="https://www.huawei.com" target="_blank">华为</a>
      </div>
    </div>
    <div class="dropdown" style="float: right;">
      <button class="dropbtn">下拉菜单（右）</button>
      <div class="dropdown-content">
        <a href="https://www.tencent.com" target="_blank">腾讯</a>
        <a href="https://www.1688.com" target="_blank">阿里巴巴</a>
        <a href="https://www.huawei.com" target="_blank">华为</a>
      </div>
    </div>
  </body>
</html>

5.下拉菜单应用于图片

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CSS简单学习</title>
    <style type="text/css">
      .dropdown {
        position: relative;
        display: inline-block;
      }
      .dropdown-content {
        position: absolute;
        display: none;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        background-color: whitesmoke;
      }
      .dropdown:hover .dropdown-content {
        display: block;
      }
      .desc {
        padding: 15px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>下拉图片</h2>
    <p>移动鼠标到图片上显示下拉内容。</p>
    <div class="dropdown">
      <img src="img/images/tx.jpg" alt="表情图" width="110" height="110" />
      <div class="dropdown-content">
        <img src="img/images/tx.jpg" alt="表情图" width="330" height="330" />
        <div class="desc">
          <p>表情图在这里被放大了！！！</p>
        </div>
      </div>
    </div>
  </body>
</html>

6.下拉菜单应用于导航栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CSS简单学习</title>
    <style type="text/css">
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: dimgray;
      }
      li {
        float: left;
      }
      li a, .dropbtn {
        display: inline-block;
        padding: 14px 16px;
        text-align: center;
        text-decoration: none;
        color: white;
      }
      li a:hover, .dropdown:hover, .dropbtn {
        background-color: black;
      }
      .dropdown {
        display: inline-block;
      }
      .dropdown-content {
        position: absolute;
        display: none;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        background-color: ghostwhite;
      }
      .dropdown-content a {
        display: block;
        padding: 12px 16px;
        text-decoration: none;
        color: black;
      }
      .dropdown-content a:hover {
        background-color: antiquewhite;
      }
      .dropdown:hover .dropdown-content {
        display: block;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <div class="dropdown">
        <a href="#link" class="dropbtn">相关链接</a>
        <div class="dropdown-content">
          <a href="https://www.tencent.com" target="_blank">腾讯</a>
          <a href="https://www.1688.com" target="_blank">阿里巴巴</a>
          <a href="https://www.huawei.com" target="_blank">华为</a>
        </div>
      </div>
    </ul>
    <h3>导航栏上的下拉菜单</h3>
    <p>鼠标移动到 "相关链接" 上，会显示下拉菜单。</p>
  </body>
</html>

web前端学习（二十八）——CSS3下拉菜单的相关设置

1.开篇

2.基本下拉菜单

3.完善的下拉菜单

4.下拉菜单的对齐方式

5.下拉菜单应用于图片

6.下拉菜单应用于导航栏

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

web前端学习（二十八）——CSS3下拉菜单的相关设置

1.开篇

2.基本下拉菜单

3.完善的下拉菜单

4.下拉菜单的对齐方式

5.下拉菜单应用于图片

6.下拉菜单应用于导航栏

热门文章

最新文章

相关课程

相关电子书