search

博客列表 >导航下拉菜单

导航下拉菜单

霏梦
霏梦原创
2020年06月15日 08:43:59773浏览
  • 作者：霏梦

实现步骤

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

    代码如下

  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>
上一条：第二课：CSS三大通用属性及JS的入门介绍下一条：简单实现下拉菜单的方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多