AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-06-15 399
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
前端css
web前端
张起灵-小哥
目录
相关文章
土木林森
|
15天前
|
前端开发 JavaScript 安全
前端性能调优：HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性，HTTP/2显著提升了Web性能。同时，HTTPS确保了数据传输的安全性。文章提供了示例代码，展示了如何使用Node.js创建一个HTTP/2服务器。
土木林森
29 3
爱的不是纯牛奶-47754
|
12天前
|
监控 前端开发 JavaScript
探索微前端架构：构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略，通过将大型前端应用拆分为多个独立的微应用，提高开发效率、增强可维护性，并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
爱的不是纯牛奶-47754
31 6
土木林森
|
11天前
|
前端开发 开发者 C++
独家揭秘：前端大牛们如何高效学习新技术，保持竞争力！
【10月更文挑战第31天】前端技术飞速发展，如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略，揭示了高效学习的秘诀：明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法，大牛们能更好地掌握新技术，保持竞争力。示例代码展示了如何通过实践加深理解。
土木林森
28 4
土木林森
|
11天前
|
Web App开发 前端开发 JavaScript
揭秘！前端大牛们如何巧妙利用CSS3，打造炫酷视觉效果！
【10月更文挑战第31天】前端开发面临复杂布局的挑战，本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求，而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局，帮助开发者构建高性能、用户友好的网页应用。
土木林森
22 4
二二*一一
|
16天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
二二*一一
30 3
土木林森
|
16天前
|
前端开发 安全 应用服务中间件
前端性能调优：HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展，前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用，介绍了二进制分帧、多路复用和服务器推送等特性，并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS，以提升Web应用的性能和安全性。
土木林森
17 3
土木林森
|
16天前
|
前端开发 JavaScript API
前端框架新探索：Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来，前端技术飞速发展，Svelte凭借独特的编译时优化和简洁的API设计，成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势，包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制，并通过示例代码展示其使用方法。
土木林森
32 2
二二*一一
|
17天前
|
开发框架 前端开发 JavaScript
Web前端框架
Web前端框架等名词
二二*一一
16 2
土木林森
|
1月前
|
XML JSON API
ServiceStack：不仅仅是一个高性能Web API和微服务框架，更是一站式解决方案——深入解析其多协议支持及简便开发流程，带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架，支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程，提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑，安装简单，通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务，包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议，具备自动验证、自动过滤器等丰富功能，适合快速搭建高性能、可扩展的服务端应用。
土木林森
100 3
土木林森
|
15天前
|
设计模式 前端开发 数据库
Python Web开发：Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用，涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容，并展示了实际代码示例，帮助读者快速掌握Django全栈开发的核心技术。
土木林森
101 44

热门文章

最新文章

  • 1
    前端，测试如何修改后端接口返回的响应数据
  • 2
    前端 时间个性化 插件 jquery.timeago.js
  • 3
    前端分页插件pagination
  • 4
    一看就懂的gulp操作指南：让前端工作变得更加轻松（一）
  • 5
    wordpress页面前端添加编辑按钮
  • 6
    从0到上线开发企业级电商项目_前端_01_sublime使用技巧
  • 7
    [前端]jekyll+markdown+github搭建个人博客
  • 8
    你用过的网站前端优化的技术有哪些？
  • 9
    前端面试题（五.3）（20道）上
  • 10
    粉丝需求】如何把一个前端网页都搞下来？
  • 1
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    54
  • 2
    HTML5/CSS3粒子效果进度条代码
    60
  • 3
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    123
  • 4
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    44
  • 5
    CSS外边距重叠：原理、结果
    49
  • 6
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    57
  • 7
    CSS常见用法 以及JS基础语法
    60
  • 8
    css设置内嵌样式阴影
    62
  • 9
    css样式实现一个滑动按钮
    56
  • 10
    wxss和css的区别
    316

    • 相关课程

    更多
  • CSS 快速掌握
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • Internet Information Services（IIS）部署Web项目
  • 云上Web及FTP
  • WEB网页编程实战
  • 前端开发基础1：前端开发环境的安装和配置
  • 网站用户流量分析—适用于电商网站、资讯网站、游戏主站等各类Web站点场景
  • Web Terminal环境使用指南
    • 下一篇
    阿里云OSS设置跨域访问