search

博客列表 >第三节 下拉菜单

第三节 下拉菜单

如今放弃
如今放弃原创
2020年06月30日 14:34:12596浏览

1：代码

  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>Document</title>
  7.     <style>
  8.         /* 元素样式初始化: 学到盒模型再详细介绍 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         /* color: rgba(255, 255, 255, 0.7); */
  16.         color: #bbb;
  17.         text-decoration: none;
  18.       }
  19.       #nav {
  20.         background-color: black;
  21.         height: 50px;
  22.         line-height: 50px;
  23.       }
  24.       li {
  25.         list-style: none;
  26.         margin: 0 10px;
  27.         float: left;
  28.       }
  29.       #nav > li > a:hover {
  30.         color: white;
  31.       }
  33.       /* 将父级设置为子菜单的定位容器,即转为定位元素即可 */
  34.       #nav > li {
  35.         position: relative;
  36.       }
  38.       #nav > li > ul {
  39.         position: absolute;
  40.         top: 50px;
  42.         width: 180px;
  43.         border: 1px solid #aaa;
  44.         border-top: none;
  45.       }
  46.       #nav > li > ul > li a {
  47.         display: inline-block;
  48.         height: 50px;
  49.         color: #444;
  50.       }
  51.       ul.sub li:hover {
  52.         background-color: #eee;
  53.       }
  55.       /* 初始化时不要显示子菜单 */
  56.       #nav > li > ul {
  57.         display: none;
  58.       }
  59.     </style>
  60. </head>
  61. <body>
  62.     <ul id="nav">
  63.         <li><a href="">显示器</a>
  64.         </li>
  65.         <li><a href="">主板</a>
  66.             <ul>
  67.             <li><a href="">华硕</a></li>
  68.             <li><a href="">技嘉</a></li>
  69.             <li><a href="">七彩虹</a></li>
  70.             <li><a href="">昂达</a></li>
  71.             </ul>
  72.         </li>
  73.         <li><a href="">内存</a>
  74.         </li>
  75.         <li><a href="">硬盘</a>
  76.             <ul>
  77.                 <li><a href="">西数</a></li>
  78.                 <li><a href="">希捷</a></li>
  79.                 <li><a href="">日立</a></li>
  80.                 <li><a href="">三星</a></li>
  81.                 </ul>
  82.         </li>
  83.         <li><a href="">显卡</a>
  84.         </li>
  85.     </ul>
  86. </body>
  87. <script>
  88.     const navs =document.querySelectorAll("#nav > li");
  89.     navs.forEach(function(nav){
  90.         nav.addEventListener("mouseover", showSubMenu);
  91.         nav.addEventListener("mouseout", closeSubMenu);
  92.     })
  93.     function showSubMenu(ev){
  94.         if (ev.target.nextElementSibling !==null) {
  95.             ev.target.nextElementSibling.style.display = "block";  
  96.         }
  97.     }
  98.     function closeSubMenu(ev){
  99.         if (ev.target.nextElementSibling !==null) {
  100.             ev.target.nextElementSibling.style.display = "none";  
  101.         }
  102.     }
  103.     function closeSubMenu(ev) {
  104.       if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  105.         ev.target.nextElementSibling.style.display = "none";
  106.       }
  107.     }
  108. </script>
  109. </html>

2：效果


上一条：grid 布局基本知识下一条：仿php中文网课程模块grid布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多