Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 运用CSS定位和JS事件来编写实用二级下拉菜单
Blogger Information
Blog 24
fans 1
comment 0
visits 20859
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
运用CSS定位和JS事件来编写实用二级下拉菜单
知行合一
Original
1021 people have browsed it

二级下拉菜单在网站中应用非常广泛，这次我们利用CSS和原生Js来编写一个实用的二级下拉菜单。主要应用到的技术有CSS的定位，列表项和JS事件。

CSS定位

四种定位方式
static：定位的默认值。
relative:相对定位，相对于原来位置。（用的较多）
absolute:相对于有定位的父级元素或更上级元素进行定位。（用的较多）
fixed：相对于视窗本身进行固定定位。

javascript事件

针对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>事件与事件监听</title>
  7.   </head>
  8.   <body>
  9.     <!--事件属性-->
  10.     <button onclick="console.log(this.innerText)">按钮1</button>
  11.     <button>按钮2</button>
  12.     <button>按钮3</button>
  14.     <!--事件属性只有最后一次是有效的 同名事件刚覆盖-->
  16.     <script>
  17.       // querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代
  18.       document.querySelectorAll("button")[1].onclick = function () {
  19.         console.log("第一次点击");
  20.       };
  22.       document.querySelectorAll("button")[1].onclick = function () {
  23.         console.log("第二次点击");
  24.       };
  26.       //事件监听器  可以给一个元素多次添加同一个事件，
  27.       //并且可以自定义事件的出发阶段
  28.       const btn3 = document.querySelectorAll("button")[2];
  29.       btn3.addEventListener("click", function () {
  30.         console.log("第一次点击");
  31.       });
  32.       btn3.addEventListener("click", function () {
  33.         console.log("第二次点击");
  34.       });
  35.     </script>
  36.   </body>
  37. </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>事件触发阶段</title>
  7.   </head>
  8.   <body>
  9.     <div>
  10.       <li><a href="">事件触发阶段</a></li>
  11.     </div>
  12.     <script>
  13.       const body = document.querySelector("body");
  14.       //也可以这样写 document.body;
  15.       const div = document.querySelector("div");
  16.       const li = document.querySelector("li");
  17.       const a = document.querySelector("a");
  19.       //  a.addEventListener("click", showTagName,false);
  20.       //第三个值false是默认值，不写也可默认就是冒泡。如果是True，则是由外至内的捕获
  21.       //   a.addEventListener("click", showTagName);
  22.       //   li.addEventListener("click", showTagName);
  23.       //   div.addEventListener("click", showTagName);
  24.       //   body.addEventListener("click", showTagName);
  26.       a.addEventListener("click", showTagName, true);
  27.       li.addEventListener("click", showTagName, true);
  28.       div.addEventListener("click", showTagName, true);
  29.       body.addEventListener("click", showTagName, true);
  31.       function showTagName() {
  32.         alert(this.tagName);
  33.       }
  34.     </script>
  35.   </body>
  36. </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.     <ul>
  10.       <li>项目1</li>
  11.       <li>项目2</li>
  12.       <li>项目3</li>
  13.       <li>项目4</li>
  14.       <li>项目5</li>
  15.       <li>项目6</li>
  16.       <li>项目7</li>
  17.       <li>项目8</li>
  18.       <li>项目9</li>
  19.       <li>项目10</li>
  20.     </ul>
  21.     <script>
  22.       const lis = document.querySelectorAll("li");
  23.       //forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
  24.       //   lis.forEach(function (li) {
  25.       //     li.addEventListener("click", function () {
  26.       //       console.log(li.innerText);
  27.       //     });
  28.       //   });
  29.       //   for (var i = 0; i <= lis.length; i++) {
  30.       //     lis[i].addEventListener("click", function () {
  31.       //       console.log(this.innerText);
  32.       //     });
  33.       //   }
  35.       //ev  事件对象
  36.       //事件代理，用父级代理子元素以及更下一级的元素上的同名事件
  37.       //   document.querySelector("ul").addEventListener("click", function (ev) {
  38.       //     console.log(this.tagName);
  39.       //   });
  41.       //Event 对象  简写ev
  43.       //Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
  44.       document.querySelector("ul").addEventListener("click", function (ev) {
  45.         console.log(ev.target);
  46.       });
  47.       //event.target  返回事件的目标节点（触发该事件的节点）
  48.       document.querySelector("ul").addEventListener("click", function (ev) {
  49.         console.log(ev.currentTarget);
  50.       });
  51.       ////event.currentTarget 返回的是事件绑定者
  52.     </script>
  53.   </body>
  54. </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.     <style>
  8.       * {
  9.         padding: 0;
  10.         margin: 0;
  12.         list-style: none;
  13.       }
  14.       a {
  15.         text-decoration: none;
  16.         color: tomato;
  17.       }
  18.       #nav {
  19.         background-color: black;
  20.         height: 50px;
  21.         line-height: 50px;
  22.       }
  23.       #nav > li {
  24.         display: block;
  25.         width: 150px;
  26.         float: left;
  27.         margin-right: 30px;
  28.         position: relative;//父元素相对定位
  29.         text-align: center;
  30.       }
  32.       #nav > li > a:hover {
  33.         color: yellow;
  34.       }
  35.       #nav > li > ul {
  36.         position: absolute; //绝对定位，相对于有相对定位的父LI定位
  37.         top: 50px;
  38.         width: 150px;
  39.         display: none;
  40.       }
  41.       #nav > li > ul li {
  42.         height: 40px;
  43.         border-bottom: 1px solid white;
  44.         line-height: 40px;
  45.         text-align: center;
  46.         background-color: rgba(0, 0, 0, 0.8);
  47.       }
  48.       #nav > li > ul li:hover {
  49.         background-color: rgba(0, 0, 0, 0.6);
  50.       }
  51.     </style>
  52.   </head>
  53.   <body>
  54.     <ul id="nav">
  55.       <li><a href="">网站首页</a></li>
  57.       <li>
  58.         <a href="">国内景点</a>
  59.         <ul>
  60.           <li><a href="">故宫</a></li>
  61.           <li><a href="">长城</a></li>
  62.           <li><a href="">后海</a></li>
  63.           <li><a href="">颐和园</a></li>
  64.         </ul>
  65.       </li>
  67.       <li>
  68.         <a href="">国外景点</a>
  69.         <ul>
  70.           <li><a href="">金字塔</a></li>
  71.           <li><a href="">圣母院</a></li>
  72.           <li><a href="">埃菲尔铁塔</a></li>
  73.           <li><a href="">自由女神</a></li>
  74.         </ul>
  75.       </li>
  76.       <li>
  77.         <a href="">中国名人</a>
  78.         <ul>
  79.           <li><a href="">秦始皇</a></li>
  80.           <li><a href="">孔子</a></li>
  81.           <li><a href="">李白</a></li>
  82.           <li><a href="">杜甫</a></li>
  83.         </ul>
  84.       </li>
  85.       <li>
  86.         <a href="">世界名人</a>
  87.         <ul>
  88.           <li><a href="">亚历山大</a></li>
  89.           <li><a href="">拿破仑</a></li>
  90.           <li><a href="">俾斯麦</a></li>
  91.           <li><a href="">斯大林</a></li>
  92.         </ul>
  93.       </li>
  94.     </ul>
  95.     <script>
  96.       const navs = document.querySelectorAll("#nav>li");
  98.       navs.forEach(function (nav) {
  99.         nav.addEventListener("mouseover", showSubMenu);
  101.         nav.addEventListener("mouseout", closeSubMenu);
  102.       });
  104.       function showSubMenu(ev) {
  105.         // console.log(ev.target);
  106.         // 当前这个导航有没有子菜单?
  107.         if (
  108.           //ev.target.nodeName === "A" &&
  109.           //这里加上面判断的话，必须鼠标在A标签上才可显示。鼠标在LI上显示不了
  110.           ev.target.nextElementSibling !== null
  111.         ) {
  112.           ev.target.nextElementSibling.style.display = "block";
  113.         }
  114.       }
  116.       function closeSubMenu(ev) {
  117.         if (
  118.           ev.target.nodeName === "A" && //这里必须加判断，要不移动到其它LI标签上就会消失。因为冒泡
  119.           ev.target.nextElementSibling !== null
  120.         ) {
  121.           ev.target.nextElementSibling.style.display = "none";
  122.         }
  123.       }
  124.     </script>
  125.   </body>
  126. </html>

展示效果如下

二级下拉菜单

制做二级菜单总结如下

  • 在学习过程中，有很多不明白的地方，多看视频教程。
  • 不懂的知识点，参数、名字等多百度搜索一下。
  • 多写几遍代码，多写注释。
Correcting teacher：GuanhuiGuanhui

Correction status：qualified

Teacher's comments：写的很好哦！继续保持！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post