微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 如何编写一个专业实用的导航下拉菜单？
博主信息
博文 14
粉丝 0
评论 2
访问量 16535
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
如何编写一个专业实用的导航下拉菜单？
JKY辉哥
原创
903人浏览过
  • 知识点：链接+无序列表+元素定位+事件监听+事件委托
  • 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:返回的是事件绑定者
  • 事件冒泡：由内向外 事件捕获：由外向内
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：有许多概念， 只有自己动去写了， 才能体会更深， 看上去懂了不算的， 动手一写结果全错。。。。所以， 一定要多动手
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
1条评论
JKY辉哥 2020-06-15 11:31:18
好的，朱老师，我一定会多动手练习的
1楼
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录