Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 如何编写一个专业实用的导航下拉菜单？
Blogger Information
Blog 14
fans 0
comment 2
visits 12665
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
如何编写一个专业实用的导航下拉菜单？
JKY辉哥
Original
612 people have browsed it
  • 知识点：链接+无序列表+元素定位+事件监听+事件委托
  • vscode 快捷键
    vscode 快捷键

1. 链接 A 标签 的使用

  1.     <!-- 1.打开一个网站 -->
  3.     <a href="https://www.php.cn" target="_self">php.cn</a>
  4.     <a href="https://www.php.cn" target="_blank">php.cn</a>
  6.     <!--2. 下载一个文件 -->
  7.     <a href="http://127.0.0.1:5500/0612/demo1.zip" target="_blank">下载</a>
  9.     <!--3. 发邮件 -->
  10.     <a href="mailto:1047858916@qq.com"" target="_blank">发邮件</a>
  13.     <!--4.打电话 -->
  14.     <a href="tel:158****4023"" target="_blank">打电话</a>
  16.     <!--5. 锚点 -->
  17.     <a href="#top"">跳转到锚点</a>
  18.     <a id="top" style="margin-top: 1000px;">hello world!</a>

2. 列表

  • 有序列表
  • 无序列表
  • 自定义列表
  • 演示代码：
  2.     <!-- 无序列表 ul+li -->
  3.     <ul>
  4.       <li><a href="">首页</a></li>
  5.       <li><a href="">正在秒杀</a></li>
  6.       <li><a href="">plus</a></li>
  7.     </ul>
  9.     <!-- 有序列表 -->
  10.     <!-- ol+li -->
  11.     <h3>商品分类</h3>
  12.     <ol start="1" type="i">
  13.       <li><a href="">电脑 / 办公</a></li>
  14.       <li><a href="">服装 / 男装 / 女装</a></li>
  15.       <li><a href="">图书 / 文娱 / 教育</a></li>
  16.     </ol>
  18.     <!-- 自定义列表 -->
  19.     <!-- dl+dt+dd -->
  20.     <dl>
  21.       <dt>电话:</dt>
  22.       <dd><a href="tel:189456***34" target="_blank">189456***34</a></dd>
  23.       <dd><a href="tel:0551-67744***" target="_blank">0551-67744***</a></dd>
  25.       <dt>地址:</dt>
  26.       <dd>北京</dd>
  27.     </dl>
  28.     ```

3.元素定位

  • 相对定位：元素相对于自己在文档流中的原始位置进行偏移
  • 绝对定位：一定要有一个定位父级做为定位参照物，否则就相对于 body 进行定位
  • 演示代码：
  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.       body {
  11.         /* 文档流定位 */
  12.         position: static;
  13.         border: 1px solid red;
  14.         /* v: viewport, h:height */
  15.         /* viewport: 视口, 可视窗口, 当前你的看到的窗口大小; */
  16.         height: 100vh;
  17.       }
  19.       .box1 {
  20.         width: 200px;
  21.         height: 200px;
  22.         border: 1px solid blue;
  23.         /* 相对定位: 元素相对于自己在文档流中的原始位置进行偏移 */
  24.         /* position: relative;
  25.         position: absolute; */
  26.         top: 50px;
  27.         left: 50px;
  28.       }
  30.       .box2 {
  31.         width: 100px;
  32.         height: 100px;
  33.         border: 2px solid gold;
  34.         /* 绝对定位:一定要有一个定位父级做为定位参照物，否则就相对于body进行定位 */
  35.         position: absolute;
  36.         top: 50px;
  37.         left: 50px;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="box1">
  43.       <div class="box2"></div>
  44.     </div>
  45.   </body>
  46. </html>

4. 事件

  • 4.1 事件与事件监听

  1.     <!-- 1.事件属性 -->
  2.     <button onclick="console.log(this.innerText);">按钮1</button>
  4.     <button>按钮2</button>
  5.     <button>按钮3</button>
  7.     <script>
  8.       // 2.对象属性方式添加事件,只有最后一次点击有效，同名事件彼此覆盖
  9.       document.querySelectorAll("button")[1].onclick = function () {
  10.         console.log("第一次点击");
  11.       };
  13.       document.querySelectorAll("button")[1].onclick = function () {
  14.         console.log("第二次点击");
  15.       };
  17.       // 3.事件监听器 (工作中更多推荐使用)
  18.       const btn3 = document.querySelectorAll("button")[2];
  19.       // btn3.addEventListener(事件类型，事件方法)
  20.       btn3.addEventListener("click", function () {
  21.         console.log("第一次点击");
  22.       });
  24.       btn3.addEventListener("click", function () {
  25.         console.log("第二次点击");
  26.       });
  28.       // 可以给一个元素多次添加同一个事件，并且可以自定义事件的触发阶段
  29.     </script>
  30.     ```

  • 4.2 事件监听阶段

  1. <div>
  2.       <li>
  3.         <a href="#">点击我试试</a>
  4.       </li>
  5.     </div>
  6.     <script>
  7.       const a = document.querySelector("a");
  8.       const li = document.querySelector("li");
  9.       const div = document.querySelector("div");
  10.       //   const body = document.querySelector("body");
  11.       const body = document.body;
  13.       //  事件冒泡：由内向外
  14.       a.addEventListener("click", showTagName, false);
  15.       li.addEventListener("click", showTagName, false);
  16.       div.addEventListener("click", showTagName);
  17.       body.addEventListener("click", showTagName);
  19.       //  事件捕获：由外向内
  20.       a.addEventListener("click", showTagName, true);
  21.       li.addEventListener("click", showTagName, true);
  22.       div.addEventListener("click", showTagName, true);
  23.       body.addEventListener("click", showTagName, true);
  25.       function showTagName() {
  26.         alert(this.tagName);
  27.       }
  28.     </script>
  29.     ```

  • 4.3 事件代理/事件委托

  1. <!-- ul>li{item$}*10 table 创建10个li -->
  2.     <ul>
  3.       <li>item1</li>
  4.       <li>item2</li>
  5.       <li>item3</li>
  6.       <li>item4</li>
  7.       <li>item5</li>
  8.       <li>item6</li>
  9.       <li>item7</li>
  10.       <li>item8</li>
  11.       <li>item9</li>
  12.       <li>item10</li>
  13.     </ul>
  14.     <script>
  15.       // 循环每一个元素，并打印到控制台
  16.       //   const lis = document.querySelectorAll("li");
  17.       //   lis.forEach(function (li) {
  18.       //     li.addEventListener("click", function () {
  19.       //       console.log(li.innerText);
  20.       //     });
  21.       //   });
  23.       //   ev:事件对象
  24.       //   事件代理：用父级代理所有子元素以及更下一级的元素上的同名事件
  25.       document.querySelector("ul").addEventListener("click", function (ev) {
  26.         // console.log(this.tagName);
  28.         // ev.target:返回的是当前正在触发事件的元素
  29.         console.log(ev.target);
  31.         //ev.currentTarget:返回的是事件绑定者
  32.         console.log(ev.currentTarget);
  33.       });
  34.     </script>
  35.     ```

5.下拉菜单案例

  • 页面代码
  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: 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: 0px 10px;
  27.         float: left;
  28.       }
  30.       #nav > li > a:hover {
  31.         color: white;
  32.       }
  34.       /* 将父级设置为子菜单的定位容器，即转为定位元素即可 */
  35.       #nav > li {
  36.         position: relative;
  37.       }
  38.       #nav > li > ul {
  39.         position: absolute;
  40.         top: 50px;
  41.         width: 180px;
  42.         border: 1px solid #aaa;
  43.         border-top: none;
  44.       }
  46.       #nav > li > ul > li a {
  47.         display: inline-block;
  48.         height: 50px;
  49.         color: #444;
  50.       }
  52.       ul.sub li:hover {
  53.         background-color: #eee;
  54.       }
  56.       /* 初始化时不要显示子菜单 */
  57.       #nav > li > ul {
  58.         display: none;
  59.       }
  60.     </style>
  61.   </head>
  62.   <body>
  63.     <ul id="nav">
  64.       <li><a href="">首页</a></li>
  65.       <li><a href="">视频教程</a></li>
  66.       <li>
  67.         <a href="">资源下载</a>
  68.         <ul>
  69.           <li><a href="">PHP工具</a></li>
  70.           <li><a href="">在线手册</a></li>
  71.           <li><a href="">学习课件</a></li>
  72.           <li><a href="">网站源码</a></li>
  73.         </ul>
  74.       </li>
  75.       <li><a href="">社区问答</a></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="">PHP教程</a></li>
  82.           <li><a href="">PHP框架</a></li>
  83.         </ul>
  84.       </li>
  85.     </ul>
  86.   </body>
  87.   <script>
  88.     //   获取所有主导航
  89.     const navs = document.querySelectorAll("#nav > li");
  91.     navs.forEach(function (nav) {
  92.       // 鼠标移入时：显示子菜单
  93.       nav.addEventListener("mouseover", showSubMenu);
  94.       nav.addEventListener;
  95.       // 鼠标移出时：关掉子菜单
  96.       nav.addEventListener("mouseout", closeSubMenu);
  97.     });
  99.     // 显示子菜单
  100.     function showSubMenu(ev) {
  101.       //   console.log(ev.target);
  102.       //当前这个导航有没有子菜单？
  103.       if (ev.target.nextElementSibling !== null) {
  104.         ev.target.nextElementSibling.style.display = "block";
  105.       }
  106.     }
  107.     // 关掉子菜单
  108.     function closeSubMenu(ev) {
  109.       if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  110.         ev.target.nextElementSibling.style.display = "none";
  111.       }
  112.     }
  113.   </script>
  115.   <!-- 链接 + 无序列表 + 事件监听 +事件委托 -->
  116. </html>
  • 运行结果
    下拉导航菜单

6. 总结

  • 链接 A 标签常用 5 种方式：访问网站、发邮箱、打电话、下载、锚点
  • 列表，工作中更多的用无序列更多和自定义列表
  • 相对定位：元素相对于自己在文档流中的原始位置进行偏移；
  • 绝对定位：绝对定位一定要有一个定位父级做为定位参照物，否则就相对于 body 进行定位
  • 元素的定位: 元素默认在页面中是按文档流的顺序进行排列的
  • 文档流: 元素的排列按照书写顺序，源码中的顺序
  • 事件中 ev:事件对象 ev.target:返回的是当前正在触发事件的元素 ev.currentTarget:返回的是事件绑定者
  • 事件冒泡：由内向外 事件捕获：由外向内
Correcting teacher：天蓬老师天蓬老师

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
1 comments
JKY辉哥 2020-06-15 11:31:18
好的，朱老师，我一定会多动手练习的
1 floor
Author's latest blog post