search

博客列表 >导航栏的下拉菜单

导航栏的下拉菜单

手机用户483047737
手机用户483047737原创
2020年06月14日 17:18:20927浏览

导航栏的下拉菜单

利用html +css+js实现导航条下拉动作

效果图：

鼠标移到菜单栏上，显示下拉的二级菜单栏，鼠标移出则二级菜单栏隐藏。

实现代码：

  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. </head>
  8. <style>
  9.     body{
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.     }
  14.     a{
  15.         text-decoration: none;
  16.         color: #bbb;
  17.     }
  18.     .nav{
  19.         height: 50px;
  20.         line-height: 50px;
  21.         background-color: black;
  22.     }
  23.     .nav > ul > li{
  24.         margin: 0 20px;
  25.         float: left;
  26.         list-style: none;
  27.     }
  28.     .nav > ul > li > a:hover{
  29.       color: white;
  30.     }
  31.     .nav > ul > li > ul{
  32.         position: absolute;
  33.         top: 50px;
  34.         width: 150px;
  35.         border: 1px solid black;
  36.         display: none;
  38.     .nav ul> li ul > li {
  39.         list-style: none;
  40.         float: left;
  41.         margin: 0 10px;
  42.     }
  43.     .nav ul> li ul > li > a{
  44.         color:black;
  45.     }
  46. </style>
  47. <body>
  48.     <div class="nav">
  49.         <ul>
  50.             <li>
  51.             <a href="">天猫</a>
  52.             <ul>
  53.                 <li><a href="">天猫</li>
  54.                 <li><a href="">天猫</li>
  55.                 <li><a href="">天猫</li>
  56.                 <li><a href="">天猫</li>
  57.             </ul>
  58.         </li>
  59.         <li><a href="">聚划算</a></li>
  60.         <li><a href="">天猫超市</a></li>
  61.         <li><a href="">淘抢购</a></li>
  62.         <li>
  63.             <a href="">电器城</a>
  64.             <ul>
  65.                 <li><a href="">天猫</li>
  66.                 <li><a href="">天猫</li>
  67.                 <li><a href="">天猫</li>
  68.                 <li><a href="">天猫</li>
  69.             </ul>
  70.         </li>
  71.     </ul>
  72.     <script>
  73.         const navs = document.querySelectorAll('.nav > ul > li');
  74.     navs.forEach(function (nav) {
  75.       // 鼠标移入时: 显示子菜单
  76.       nav.addEventListener("mouseover", showSubMenu);
  77.       // 鼠标移出时: 关掉子菜单
  78.       nav.addEventListener("mouseout", closeSubMenu);
  79.     });
  81.     // 显示子菜单
  82.     function showSubMenu(ev) {
  83.       console.log(ev.target);
  84.       // 当前这个导航有没有子菜单?
  85.       if (ev.target.nextElementSibling !== null) {
  86.         ev.target.nextElementSibling.style.display = "block";
  87.       }
  88.     }
  89.     // 关掉子菜单
  90.     function closeSubMenu(ev) {
  91.       if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  92.         ev.target.nextElementSibling.style.display = "none";
  93.       }
  94.     }
  95.     </script>
  96. </body>
  97. </html>

代码解析：

html页面：

  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. </head>
  8. <body>
  9.     <div class="nav">
  10.         <ul>
  11.             <li>
  12.             <a href="">天猫</a>
  13.             <ul>
  14.                 <li><a href="">天猫</li>
  15.                 <li><a href="">天猫</li>
  16.                 <li><a href="">天猫</li>
  17.                 <li><a href="">天猫</li>
  18.             </ul>
  19.         </li>
  20.         <li><a href="">聚划算</a></li>
  21.         <li><a href="">天猫超市</a></li>
  22.         <li><a href="">淘抢购</a></li>
  23.         <li>
  24.             <a href="">电器城</a>
  25.             <ul>
  26.                 <li><a href="">天猫</li>
  27.                 <li><a href="">天猫</li>
  28.                 <li><a href="">天猫</li>
  29.                 <li><a href="">天猫</li>
  30.             </ul>
  31.         </li>
  32.     </ul>
  33. </div>
  34. </body>
  35. </html>

效果图：

利用一个大<div>标签，下面用ul和li标签实现的

没有css样式的html 效果朴实无华，仿佛回到了3g时代。

html+css页面：

  1. <style>
  2.     body{
  3.         margin: 0;
  4.         padding: 0;
  5.         box-sizing: border-box;
  6.     }
  7.     a{
  8.         text-decoration: none;
  9.         color: #bbb;
  10.     }
  11.     .nav{
  12.         height: 50px;
  13.         line-height: 50px;
  14.         background-color: black;
  15.     }
  16.     .nav > ul > li{
  17.         margin: 0 20px;
  18.         float: left;
  19.         list-style: none;
  20.     }
  21.     .nav > ul > li > a:hover{
  22.       color: white;
  23.     }
  24.     .nav > ul > li > ul{
  25.         position: absolute;
  26.         top: 50px;
  27.         width: 150px;
  28.         border: 1px solid black;
  29.         display: none;
  30.   }
  32.     .nav ul> li ul > li {
  33.         list-style: none;
  34.         float: left;
  35.         margin: 0 10px;
  36.     }
  37.     .nav ul> li ul > li > a{
  38.         color:black;
  39.     }
  40. </style>

利用css内部样式 给div 和ul li 标签进行添加样式。效果立马高大上！

效果图：

js代码：

  1.  <script>
  2.         const navs = document.querySelectorAll('.nav > ul > li');
  3.     navs.forEach(function (nav) {
  4.       // 鼠标移入时: 显示子菜单
  5.       nav.addEventListener("mouseover", showSubMenu);
  6.       // 鼠标移出时: 关掉子菜单
  7.       nav.addEventListener("mouseout", closeSubMenu);
  8.     });
  10.     // 显示子菜单
  11.     function showSubMenu(ev) {
  12.       console.log(ev.target);
  13.       // 当前这个导航有没有子菜单?
  14.       if (ev.target.nextElementSibling !== null) {
  15.         ev.target.nextElementSibling.style.display = "block";
  16.       }
  17.     }
  18.     // 关掉子菜单
  19.     function closeSubMenu(ev) {
  20.       if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  21.         ev.target.nextElementSibling.style.display = "none";
  22.       }
  23.     }
  24.     </script>

1.利用document.querySelectorAll(）方法 获取所有的标签放在常量navs里。

2.遍历常量navs，给他绑定两种事件，分别是鼠标移入和鼠标移出事件，并分别给这两个事件定义两个方法showSubMenu和closeSubMenu。

3.定义showSubMenu(ev)方法 ，切记加上事件对象（ev），不然不起作用。

4.showSubMenu(ev)函数 用if判断 ev.target.nextElementSibling是否为空 来显示当前这个导航下面的子菜单。

5.closeSubMenu(ev)函数 同样用if判断，两个判断条件ev.target.nodeName === “A” 和 ev.target.nextElementSibling !== null。

上一条：laravel--通用后台管理系统--用户的登录和退出--用户的增删改查下一条：PHP大牛成长之路小试牛刀：仿PHP中文版导航
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多