search

博客列表 >导航下拉菜单

导航下拉菜单

王佳祥
王佳祥原创
2020年06月13日 17:16:26880浏览

导航下拉菜单

一、 css样式表

1. 内联样式

<h1 style="color:red">CSS内联样式</h1>

2. 元素标签

  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>css样式表</title>
  7.         <style>
  8.          h1{
  9.              color:red;
  10.          }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <h1>
  15.             CSS元素标签样式
  16.         </h1>
  17.     </body>
  18. </html>

3.链接外部样式

第一步:首先在同级目录下创建自定义的css文件，如style.css，编写自己想要的样式

  1. .red{
  2.        color:red;
  3.     }

第二步:外部引入CSS样式文件是通过link标签实现的，它只能位于HTML文档的head标签内，且必须有href属性，该属性用于指定需要引入的CSS文件的路径。

  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.             <link rel="styleSheet" href="style.css" >
  8.         </head>
  9.         <body>
  10.             <h1 class="red">
  11.                 链接外部样式
  12.             </h1>
  13.         </body>
  14.     </html>

写法：<link rel="stylesheet" href="CSS样式文件的路径">

4. 导入外部样式

第一步:自定义一个css文件
第二部:导入外部样式单的功能与链接外部样式的功能差不多，都能实现一样的功能，但是它们之间还是存在一定的差别的，导入外部样式主要通过@import方式导入CSS文件。

  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.           @import url("style.css");
  9.           <!--或者@import "style.css";-->
  10.         </style>
  11.         </head>
  12.         <body>
  13.             <h1>
  14.                 导入外部样式
  15.             </h1>
  16.         </body>
  17.    </html>

写法:@import url(“css样式文件的路径”);
简写:@import “css样式文件的路径”;

二、链接元素a

  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>链接元素a</title>
  7.         <style>
  8.          body{
  9.              display:grid;<!--网格布局,默认是块元素-->
  10.          }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <a href="https://www.php.cn" target="_self">PHP中文网</a>
  15.         <!--target打开链接的方式,_self是在本身的网页窗口打开链接-->
  17.         <a href="style.css" target="_blank">CSS样式文件</a>
  18.         <!--_blank是在新的网页窗口打开链接-->
  20.         <a href="http://127.0.0.1:5500/0612/demo1.zip">下载文件</a>
  21.         <!--打开无法识别的文件会默认下载-->
  23.         <a href="mailto: 2896******@qq.com" target="_blank">发送邮件</a>
  25.         <a href="tel: 188****8888" targrt="_balnk">拨打电话</a>
  27.         <a href="#id1" >锚点</a>
  28.         <p id="id1" style="margin-top:1000px;">
  29.           点击锚点可以跳转到id所标记的位置
  30.         </p>
  31.     </body>
  32. </html>

三、列表

1.无序列表

  1. <ul>
  2.    <li><a href="">首页</a></li>
  3.    <li><a href="">正在秒杀</a></li>
  4.    <li><a href="">更多优惠</a></li>
  5. </ul>

2. 有序列表

  1. <ol>
  2. <li><a href="">电脑 / 办公 </a></li>
  3. <li><a href="">童装 / 男装 / 女装 </a></li>
  4. <li><a href="">图书 / 文娱 / 教育 </a></li>
  5. </ol>

3. 自动义列表

  1. <dl>
  2.    <dt>电话L:</dt>
  3.    <dd><a href="tel:139****5656" targrt="_blank">139****5656</a></dd>
  4.    <dd><a href="tel:188**5656" targrt="_blank">188**5656</a></dd>
  5.    <dt>地址：</dt>
  6.    <dd>广州*******25号</dd>
  7. </dl>

四、元素定位

  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.   <style>
  9.     body {
  10.       position: static;
  11.       /*默认值，没有定位，可以清除已有的定位*/
  12.       border: 2px solid red;
  13.       /*设置body边框的宽度为2像素，线条为直线，颜色为红色*/
  14.       height: 100vh;
  15.       /*设置body高度为视口高度，v:viewport,h:height,100就是百分百视口*/
  16.     }
  17.     .box1 {
  18.       width: 400px;
  19.       height: 400px;
  20.       border: 2px solid blue;
  21.       position: relative;
  22.       /*设置box1的定位为相对定位，在原来的位置上进行偏移*/
  23.       margin-top: 50px;
  24.       /*向下偏移50px*/
  25.       margin-left: 50px;
  26.       /*向右偏移50px*/
  27.     }
  28.     .box2 {
  29.       width: 200px;
  30.       height: 200px;
  31.       border: 2px solid green;
  32.       position:absolute;
  33.       /*设置box2为绝对定位，以父级单位为参照物进行偏移，否则就以body为参照物进行偏移*/
  34.       top:50px;
  35.       left:50px;
  36.     }
  37.   </style>
  38.   <body>
  39.     <div class="box1">
  40.       <div class="box2"></div>
  41.     </div>
  42.   </body>
  43. </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>事件与事件监听t</title>
  7.   </head>
  8.   <body>
  9.     <!-- 事件属性 -->
  10.     <button onclick="console.log(this.innerText)">按钮1</button>
  11.     <!-- 对象属性方式添加事件 -->
  12.     <button>按钮2</button>
  13.     <button>按钮3</button>
  14.     <script>
  15.       document.querySelectorAll("button")[1].onclick = function () {
  16.         console.log("第一次点击");
  17.       };
  18.       document.querySelectorAll("button")[1].onclick = function () {
  19.         console.log("第二次点击");
  20.       };
  21.       /* 创建两个相同的点击事件，只有最后的点击事件有效 */
  22.       /* 事件监听器 */
  23.       const btn3 = document.querySelectorAll("button")[2];
  24.       //btn3.addEventListener(事件类型，事件方法);
  25.       btn3.addEventListener("click", function () {
  26.         console.log("第一次点击按钮3");
  27.       });
  28.       btn3.addEventListener("click", function () {
  29.         console.log("第二次点击按钮3");
  30.       });
  31.     </script>
  32.   </body>
  33. </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>
  11.         <a href="">点击我试试</a>
  12.       </li>
  13.     </div>
  14.   </body>
  15.   <script>
  16.     const a = document.querySelector("a");
  17.     const li = document.querySelector("li");
  18.     const div = document.querySelector("div");
  19.     const body = document.body;
  20.     //事件冒泡:由内向外
  21.     a.addEventListener("click", showTagName, false);
  22.     /* 默认值是false，也可以不写,事件在冒泡阶段执行*/
  23.     li.addEventListener("click", showTagName);
  24.     div.addEventListener("click", showTagName);
  25.     body.addEventListener("click", showTagName);
  26.     //事件捕获:由外向内
  27.     a.addEventListener("click", showTagName, true);
  28.     /* true,事件在捕获阶段执行 */
  29.     li.addEventListener("click", showTagName, true);
  30.     div.addEventListener("click", showTagName, true);
  31.     body.addEventListener("click", showTagName, true);
  33.     function showTagName() {
  34.       alert(this.tagName);
  35.     }
  36.   </script>
  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.     <ul>
  10.       <li>item1</li>
  11.       <li>item2</li>
  12.       <li>item3</li>
  13.       <li>item4</li>
  14.       <li>item5</li>
  15.       <li>item6</li>
  16.       <li>item7</li>
  17.       <li>item8</li>
  18.       <li>item9</li>
  19.       <li>item10</li>
  20.     </ul>
  21.   </body>
  22.   <script>
  23.     /* const lis = document.querySelectorAll("li");
  24.     lis.forEach(function (li) {
  25.       li.addEventListener("click", function () {
  26.         console.log(li.innerText);
  27.       });
  28.     }); */
  29.     //ev:事件对象
  30.     //事件代理：用父级代理所有子元素以及更下一级的元素上的同名事件
  31.     document.querySelector("ul").addEventListener("click", function (ev) {
  32.       console.log(ev.target);
  33.       //ev.target返回的是当前正在触发事件的元素
  34.       console.log(ev.currentTarget);
  35.       //ev.currentTarget返回的是事件绑定者
  36.     });
  37.   </script>
  38. </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.     <style>
  8.       /*元素样式初始化：*/
  9.       body {
  10.         padding: 0px; /*内边距为0px*/
  11.         margin: 0px; /*外边距为0px*/
  12.         box-sizing: border-box; /*　宽高会自动减去padding和border的值，并调整content的值*/
  13.       }
  14.       a {
  15.         color: #bbb; /*设置链接字体为灰白色*/
  16.         text-decoration: none; /*去掉链接下划线*/
  17.       }
  18.       #nav {
  19.         background-color: black; /*设置导航背景为黑色，ul为黑色背景*/
  20.         height: 50px; /*导航高50px*/
  21.         line-height: 50px; /*设置行高为50px，可以把字体上下居中*/
  22.       }
  23.       li {
  24.         list-style: none; /*取消列表前面的圆点符号*/
  25.         margin: 0 10px; /*上下外边距为0px，左右外边距为10px*/
  26.         float: left; /*设置li元素向左浮动*/
  27.       }
  28.       #nav > li > a:hover {
  29.         color: white; /*设置鼠标停留在一级导航栏时的字体颜色为白色*/
  30.       }
  31.       /*将父级设置为菜单的定位容器，即转为定位元素即可*/
  32.       #nav > li {
  33.         position: relative; /*设置一级菜单的li为相对定位，以原来的位置为参照物进行偏移*/
  34.       }
  35.       #nav > li > ul {
  36.         position: absolute; /*设置二级菜单的ul为绝对定位，以ul的父级li为参照物进行偏移*/
  37.         top: 50px; /*将二级导航菜单向下偏移50px*/
  38.         width: 180px; /*设置二级导航菜单宽度为180px*/
  39.         border: 1px solid #aaa; /*边框为1像素，线条为直线，颜色是灰色*/
  40.         border-top: none; /*去掉上边框*/
  41.       }
  42.       #nav > li > ul > li a {
  43.         display: inline-block; /*将a标签变为行内块元素*/
  44.         height: 50px; /*设置a元素高度为50px*/
  45.         color: #444; /*字体颜色为深黑色*/
  46.       }
  47.       ul.sub li:hover {
  48.         background-color: #eee;
  49.       }
  51.       /*初始化时不显示子菜单*/
  52.       #nav > li > ul {
  53.         display: none; /*隐藏元素*/
  54.       }
  55.     </style>
  56.   </head>
  57.   <body>
  58.     <ul id="nav">
  59.       <li><a href="">首页</a></li>
  60.       <li><a href="">视频教程</a></li>
  61.       <li><a href="">入门教程</a></li>
  62.       <li><a href="">社区问答</a></li>
  63.       <li>
  64.         <a href="">技术文章</a>
  65.         <ul>
  66.           <li><a href="">头条</a></li>
  67.           <li><a href="">博客</a></li>
  68.           <li><a href="">php教程</a></li>
  69.           <li><a href="">php框架</a></li>
  70.           <li><a href="">php小知识</a></li>
  71.           <li><a href="">mysql教程</a></li>
  72.           <li><a href="">html教程</a></li>
  73.           <li><a href="">css教程</a></li>
  74.           <li><a href="">js教程</a></li>
  75.           <li><a href="">服务器运维</a></li>
  76.         </ul>
  77.       </li>
  78.       <li>
  79.         <a href="">资源下载</a>
  80.         <ul>
  81.           <li><a href="">php工具</a></li>
  82.           <li><a href="">在线工具</a></li>
  83.           <li><a href="">手册下载</a></li>
  84.           <li><a href="">学习课件</a></li>
  85.           <li><a href="">js特效</a></li>
  86.           <li><a href="">后端模板</a></li>
  87.           <li><a href="">网站源码</a></li>
  88.           <li><a href="">类库下载</a></li>
  89.         </ul>
  90.       </li>
  91.       <li>
  92.         <a href="">编程词典</a>
  93.         <ul>
  94.           <li><a href="">php词典</a></li>
  95.           <li><a href="">原生手册</a></li>
  96.           <li><a href="">mysql词典</a></li>
  97.           <li><a href="">Linux词典</a></li>
  98.           <li><a href="">Redis词典</a></li>
  99.           <li><a href="">html词典</a></li>
  100.           <li><a href="">Javascript词典</a></li>
  101.           <li><a href="">CSS词典</a></li>
  102.           <li><a href="">Bootstrap词典</a></li>
  103.           <li><a href="">jQuery词典</a></li>
  104.         </ul>
  105.       </li>
  106.       <li><a href="">工具下载</a></li>
  107.       <li><a href="">php培训</a></li>
  108.     </ul>
  109.   </body>
  110.   <script>
  111.     //获取所有的主导航
  112.     const navs = document.querySelectorAll("#nav > li");
  114.     navs.forEach(function (nav) {
  115.       //鼠标移入时显示子菜单
  116.       nav.addEventListener("mouseover", showSubMenu);
  117.       //鼠标移出时关掉子菜单
  118.       nav.addEventListener("mouseout", closeSubMenu);
  119.     });
  121.     //显示子菜单
  122.     function showSubMenu(ev) {
  123.       //当前这个导航有没有子菜单？
  124.       if (ev.target.nextElementSibling != null) {
  125.         /*ev中包含了事件触发时的函数*/
  126.         /*target返回触发该事件的节点*/
  127.         /*nextElementSibling返回指定元素之后的下一个兄弟元素*/
  128.         ev.target.nextElementSibling.style.display = "block";
  129.       }
  130.     }
  132.     //关掉子菜单
  133.     function closeSubMenu(ev) {
  134.       if (ev.target.nodeName === "A" && ev.target.nextElementSibling != null) {
  135.         /*nodeName指定节点的节点名称*/
  136.         ev.target.nextElementSibling.style.display = "none";
  137.       }
  138.     }
  139.   </script>
  140. </html>

九、学习收获

1.css样式的外部链接和导入

2.a元素的多种用法，打开网站，打开文件，下载文件，发送邮件，拨打电话

3. 有序列表、无序列表和自定义列表

4. 元素定位：相对定位，绝对定位，静态定位

5. 事件与事件监听器，addEventListener(事件类型，事件方法)

6. 事件触发阶段，冒泡：由内到外，捕获：由外到内

7. 事件代理，用父级代理所有子元素以及更下一级的子元素

8. 学到了很多新的函数，明白了导航下拉菜单的原理，当鼠标移到菜单时会触发并执行显示子菜单的方法，鼠标离开时，执行隐藏子菜单的方法。

总结：通过实战和测试发现自己还有很多不明白的地方，比如ev在什么时候用，为什么要用，冒泡和事件代理是不是差不多一个意思，不懂forEach的用法，还需要继续努力学习！

上一条：下拉菜单及相关基础知识点汇总下一条：实现导航下拉菜单及鼠标移入移出事件-web前端第3章6.12
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多