首页 技术分享 UI/UX 设计 正文
我要投稿

创建二级菜单的示例，分别使用 HTML、CSS 和 JavaScript 等不同技术实现

UI/UX 设计
2025-05-12 0 39

创建二级菜单的示例，分别使用 HTML、CSS 和 JavaScript 等不同技术实现

纯 HTML+CSS 实现

<!DOCTYPE html>
<html>

<head>
  <metacharset="UTF-8">
  <title>使用HTML+CSS制作二级菜单</title>
  <style>/* 清除文档内外边距，让div区域能够紧贴浏览器边缘 */
    body {
      padding: 0px;
      margin: 0px;
    }

    /* 设置顶部div区域样式 */
    .topMenu {
      z - index: 1;
      /* 设置元素堆叠顺序，保证菜单能出现在最前端 */
      width: 100%;
      /* 设置宽度 */
      height: 50px;
      /* 设置指定高度。如果想要增加顶部横向导航栏的高度设置这个 */
      background - color: #000000;
      /* 设置背景颜色，让没有列表项的位置也有颜色，看起来不违和 */
    }

    /* 设置底部div区域样式 */
    .mainContent {
      position: absolute;
      /* 这个定位是为了让这个div区域固定在页面底端 */
      bottom: 0px;
      /* 让它定位在底端 */
      overflow: hidden;
      /* 溢出部分隐藏，防止出现第二个滚动条 */
      z - index: - 1;
      /* 设置元素堆叠顺序为最底层，为了不让它遮住下拉菜单的垂直列表项 */
      width: 100%;
      /* 设置宽度 */
      /* 因为不是所有浏览器都支持CSS3中的calc()方法，所以这里写了三条去设置高度 */
      height: -webkit - calc(100% - 50px);
      height: -moz - calc(100% - 50px);
      height: calc(100% - 50px);
      background - color: #CDCDCD;
      /* 这个背景颜色是测试用的，想删除可以删除 */
    }

    /* 一级菜单样式 */
    .topMenu ul {
      list - style - type: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify - content: space - around;
    }

    .topMenu ul li {
      position: relative;
    }

    .topMenu ul li a {
      display: block;
      color: white;
      text - align: center;
      padding: 14px 16px;
      text - decoration: none;
    }

    /* 二级菜单样式，初始隐藏 */
    .topMenu ul li ul {
      display: none;
      position: absolute;
      background - color: #f9f9f9;
      min - width: 160px;
      box - shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z - index: 1;
    }

    .topMenu ul li ul li {
      color: black;
      padding: 12px 16px;
      text - decoration: none;
      display: block;
      text - align: left;
    }

    /* 鼠标悬停在一级菜单上时显示二级菜单 */
    .topMenu ul li:hover ul {
      display: block;
    }

    /* 鼠标悬停在二级菜单上时改变颜色 */
    .topMenu ul li ul li:hover {
      background - color: #f1f1f1;
    }</style>
</head>

<body>
  <!-- 顶部div区域，存放横向导航栏 -->
  <divclass="topMenu">
    <!-- 一级菜单 -->
    <ul>
      <!-- 二级菜单:菜鸟教程 -->
      <liclass="dropdown">
        <ahref="www.runoob/">菜鸟教程</a>
        <ulclass="dropdown - content">
          <li><ahref="www.runoob/html/html - tutorial.html">HTML教程</a></li>
          <li><ahref="www.runoob/css/css - tutorial.html">CSS教程</a></li>
          <li><ahref="www.runoob/html/html5 - intro.html">HTML5教程</a></li>
          <li><ahref="www.runoob/css3/css3 - tutorial.html">CSS3教程</a></li>
        </ul>
      </li>
      <!-- 二级菜单:indienova -->
      <liclass="dropdown">
        <ahref="indienova/">indienova</a>
        <ulclass="dropdown - content">
          <li><ahref="indienova/indie - game - news/">文章</a></li>
          <li><ahref="indienova/column/">专题</a></li>
          <li><ahref="indienova/indie - game - development/">开发</a></li>
          <li><ahref="indienova/usergames">游戏</a></li>
        </ul>
      </li>
      <!-- 二级菜单:哔哩哔哩动画 -->
      <liclass="dropdown">
        <ahref="www.bilibili/">哔哩哔哩动画</a>
        <ulclass="dropdown - content">
          <li><ahref="www.bilibili/v/douga/?spm_id_from=333.334.b_7072696d6172795f6d656e75.2">动画</a></li>
          <li><ahref="www.bilibili/anime/?spm_id_from=333.334.b_7072696d6172795f6d656e75.7">番剧</a></li>
        </ul>
      </li>
      <!-- 右浮动的一级菜单选项:百度 -->
      <liid="baiDu"><ahref="www.baidu/">百度</a></li>
    </ul>
  </div>
  <!-- 主要内容的div区域，存放网站页面的框架 -->
  <divclass="mainContent"></div>
</body>

</html>

使用 jQuery 实现

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>jQuery二级菜单示例</title>
  <style>
    #menu {
      list - style: none;
      /* 去掉列表样式 */
      padding: 0;
      /* 去掉内边距 */
    }

    #menu>li {
      position: relative;
      /* 使子菜单能相对于父菜单定位 */
    }

    .submenu {
      display: none;
      /* 初始不显示二级菜单 */
      position: absolute;
      /* 绝对定位 */
      left: 0;
      top: 100%;
      list - style: none;
      /* 去掉列表样式 */
      padding: 0;
      /* 去掉内边距 */
      background - color: #f4f4f4;
      /* 设置背景 */
    }

    .submenu li {
      padding: 5px 10px;
    }
  </style>
  <!-- 引入jQuery库 -->
  <script src="https://code.jquery.com/jquery - 3.6.0.min.js"></script>
  <script>
    $(document).ready(function () {
      // 当主菜单项被点击
      $("#menu>li>a").click(function (e) {
        e.preventDefault();
        // 阻止默认链接行为
        $(this).siblings(".submenu").slideToggle();
        // 切换显示/隐藏子菜单
      });
    });
  </script>
</head>

<body>
  <ul id="menu">
    <li>
      <a rel="nofollow" href="#">菜单1</a>
      <ul class="submenu">
        <li><a rel="nofollow" href="#">子菜单1 - 1</a></li>
        <li><a rel="nofollow" href="#">子菜单1 - 2</a></li>
      </ul>
    </li>
    <li>
      <a rel="nofollow" href="#">菜单2</a>
      <ul class="submenu">
        <li><a rel="nofollow" href="#">子菜单2 - 1</a></li>
        <li><a rel="nofollow" href="#">子菜单2 - 2</a></li>
      </ul>
    </li>
  </ul>
</body>

</html>


以上代码实现了简单的二级菜单效果，在纯 HTML+CSS 的实现中，通过鼠标悬停来显示二级菜单；在使用 jQuery 的实现中，通过点击主菜单项来切换显示 / 隐藏子菜单。
收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

本网站所有资源版权归原作者所有，仅供学习与参考用途，严禁用于任何商业行为。因商业使用引发的版权纠纷，一切法律责任由使用者自行承担。若发现内容侵犯您的合法权益，请及时联系我们，我们将尽快处理。

恒鼎创业园 UI/UX 设计 创建二级菜单的示例，分别使用 HTML、CSS 和 JavaScript 等不同技术实现 https://www.hding.cc/112.html

上一篇：

已经没有上一篇了!

下一篇：

已经没有下一篇了!

常见问题

为何我下载的源码文件解压失败？

  • 可能原因有：一是您的解压软件版本较低，不支持该压缩格式，建议更新解压软件至最新版；二是下载过程中文件损坏，您可尝试删除原文件，重新下载；若多次重新下载仍解压失败，可能是资源本身存在问题，请联系我们反馈，我们会尽快核实处理。
查看详情

我在浏览文章时，页面底部突然出现空白区域，这是怎么回事？

  • 出现此情况，大概率是页面样式冲突所致。部分浏览器可能对某些 CSS 样式兼容性欠佳，当文章内复杂样式相互作用时，就可能导致布局异常。您可尝试刷新页面，若问题依旧，可切换到其他主流浏览器访问；或者检查您浏览器是否有安装可能干扰页面显示的插件，暂时禁用后再尝试浏览。
查看详情

我想获取文章中提及源码的更多版本，该如何操作？

  • 您可先在本站搜索栏输入相关关键词，筛选是否有对应源码的其他版本资源。若未找到，您可以通过 “问题反馈” 板块，向我们详细说明需求，包括文章名称、所需源码版本及用途等，我们会根据情况在后续资源整理中，优先为您补充相关版本资源。
查看详情

文章中展示的源码运行报错怎么办？

  • 可能是由于运行环境不匹配，如编程语言版本、依赖库缺失或版本不一致导致。您可先检查文章中是否有注明运行环境要求，按照要求配置；也可尝试在本站技术交流区搜索报错关键词，查看其他用户的解决方案；若仍无法解决，欢迎通过 “问题反馈” 提交报错信息和运行环境说明，我们将协助排查 。
查看详情

相关文章

创建二级菜单的示例，分别使用 HTML、CSS 和 JavaScript 等不同技术实现
创建二级菜单的示例，分别使用 HTML、CSS 和 JavaScript 等不同技术实现
UI/UX 设计
3周前 39
猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

联系官方团队 在线提交工单
TA的动态
恒鼎创业园

分享最新WordPress教程共同学习，共同进步，共同成长！

QQ交流群
恒鼎创业园

QQ交流群

您的支持，是我们最大的动力！
热门文章
热门评论
终身VIP会员限时钜惠
首页 首页 菜单 首页 首页