登录  /  注册
首页 > 博客列表 > 导航下拉菜单
博主信息
博文 31
粉丝 2
评论 0
访问量 26812
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
导航下拉菜单
霏梦
原创
741人浏览过
  • 作者：霏梦

实现步骤

  • 先定义一个导航
  • 通过无序列表，定义好要显示的菜单
  • 通过布局实现样式
  • 通过事件来实现下拉效果

    代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>下拉菜单</title>
  7.     <style>
  8.       /* 元素样式初始化 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         color: #bbb;
  16.         text-decoration: none;
  17.       }
  18.       #nav {
  19.         background-color: black;
  20.         height: 50px;
  21.         line-height: 50px;
  22.       }
  23.       li {
  24.         list-style: none;
  25.         margin: 0 10px;
  26.         float: left;
  27.       }
  28.       #nav > li > a:hover {
  29.         color: white;
  30.       }
  31.       #nav > li {
  32.         position: relative;
  33.       }
  34.       #nav > li > ul {
  35.         position: absolute;
  36.         top: 50px;
  37.         width: 180px;
  38.         border: 1px solid #aaa;
  39.         border-top: none;
  40.       }
  41.       #nav > li > ul > li a {
  42.         display: inline-block;
  43.         height: 50px;
  44.         color: #444;
  45.       }
  46.       ul.sub li:hover {
  47.         background-color: #eee;
  48.       }
  49.       /* 初始化时不要显示 */
  50.       #nav > li > ul {
  51.         display: none;
  52.       }
  53.     </style>
  54.   </head>
  56.   <body>
  57.     <ul id="nav">
  58.       <li><a href="">首页</a></li>
  59.       <li>
  60.         <a href="">公司产品</a>
  61.         <ul>
  62.           <li><a href="">在线聊天</a></li>
  63.           <li><a href="">在线看电影</a></li>
  64.           <li><a href="">在线学习</a></li>
  65.           <li><a href="">网站源码</a></li>
  66.           <li><a href=""></a></li>
  67.         </ul>
  68.       </li>
  69.       <li><a href="">寻找帮助</a></li>
  70.       <li>
  71.         <a href="">公司地点</a>
  72.         <ul>
  73.           <li><a href="">总部</a></li>
  74.           <li><a href="">分部</a></li>
  75.           <li><a href="">事业部</a></li>
  76.           <li><a href="">海外</a></li>
  77.         </ul>
  78.       </li>
  79.     </ul>
  80.   </body>
  81.   <script>
  82.     // 获取所有的主导航
  83.     const navs = document.querySelectorAll("#nav>li");
  84.     //console.log(navs);
  86.     navs.forEach(function (nav) {
  87.       //鼠标移入时，显示子菜单
  88.       nav.addEventListener("mouseover", showSubMenu);
  89.       //鼠标移出时，关掉子菜单
  90.       nav.addEventListener("mouseout", closeSubMenu);
  91.     });
  93.     function showSubMenu(ev) {
  94.       //判断当前这个导航有没有子菜单
  95.       if (ev.target.nextElementSibling !== null) {
  96.         ev.target.nextElementSibling.style.display = "block";
  97.       }
  98.     }
  99.     //判断有没有元素标签A
  100.     function closeSubMenu(ev) {
  101.       if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  102.         ev.target.nextElementSibling.style.display = "none";
  103.       }
  104.     }
  105.   </script>
  106. </html>
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：下拉菜单 ， 有多种实现的dom结构， 目前 咱们教的是最经典的， 当然并不是最简洁的， 以后学到flex会发现还可以大量简化代码的
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录