search

博客列表 >JavaScript 事件 css 定位 实现导航下拉菜单

JavaScript 事件 css 定位 实现导航下拉菜单

写代码的张先森
写代码的张先森原创
2020年06月14日 00:03:52850浏览

一，css定位（实现下拉菜单需掌握知识点）

能够熟练使用css中的定位对页面美化会有很大的帮助，下面我们详细介绍下四种定位方法：静态定位，相对定位，绝对定位，固定定位

1.静态定位：position: static;也叫文档流定位，一般标签不加定位都属于文档流定位，/* 文档流：元素的排列按照书写顺序 源码中的顺序 */

2.相对定位：position: relative; 元素相对于自己在文档流(浏览器页面)中的原始位置进行偏移

3.绝对定位：position: absolute;一定要有一个定位父级作为定位参照物 否则就相对于body进行定位。通俗点说绝对定位是相对于它的已经做过定位的父级或者上级作为定位参照物的，所以想要绝对定位他的父级或者上级必须有相对定位，否则他就以body为参照物进行定位

4.固定定位：position: fixed; 固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。将元素放置在浏览器窗口的固定位置，拖拽窗口时元素位置不变。

二， JavaScript 事件（实现下拉菜单需掌握知识点）

1.什么是事件？
JavaScript 创建动态页面。事件是可以被JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

2.给某个元素定义事件的方法有哪些？
（1）事件属性 通俗说就是给一个元素通过添加属性的方法添加事件
例：<button onclick="console.log(this.innerText)">按钮1</button>通过给按钮添加onclick属性的方法添加点击事件

（2）对象属性 通过获取对象的方式给元素添加事件

  1. <button>按钮2</button>
  2. <script>
  3.           document.querySelectorAll("button")[0].onclick = function () {
  4.             console.log("第一次点击");
  5.           };
  6.           document.querySelectorAll("button")[0].onclick = function () {
  7.             console.log("第二次点击");
  8.           };
  9. </script>

注：只有最后一次有效 同名事件彼此覆盖

（3）事件监听器 

  1. <button>按钮3</button>
  2.  <script>
  3.       //   3.事件监听器
  4.       const btn3 = document.querySelectorAll("button")[0];
  5.       // btn3.addEventListener(事件类型，事件方法，)
  6.       btn3.addEventListener("click", function () {
  7.         console.log("第一次点击");
  8.       });
  9.       btn3.addEventListener("click", function () {
  10.         console.log("第二次点击");
  11.       });
  12.       //可以给一个元素多次添加
  13.     </script>

注：可以给一个元素多次添加

三，实现导航下拉菜单

代码：

  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>商城导航下拉菜单demo</title>
  7.     <style>
  8.       body {
  9.         font-size: 14px;
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       ul {
  14.         margin: 0;
  15.         padding: 0;
  16.         list-style: none;
  17.       }
  18.       a {
  19.         text-decoration: none;
  20.       }
  21.       .box1 {
  22.         width: 500px;
  23.         height: 30px;
  24.       }
  25.       .box1 .box-min {
  26.         width: 100px;
  27.         height: 30px;
  28.         float: left;
  29.         position: relative;
  30.       }
  31.       .box1 .box-min a {
  32.         display: block;
  33.         width: 100px;
  34.         height: 30px;
  35.         float: left;
  36.         text-align: center;
  37.         line-height: 30px;
  38.         color: white;
  39.         background-color: black;
  40.       }
  41.       .box1 .box-min a:hover {
  42.         background-color: rgb(34, 34, 37);
  43.       }
  44.       .box1 .box-min ul {
  45.         position: absolute;
  46.         top: 30px;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <ul class="box1">
  52.       <li class="box-min"><a href="">首页</a></li>
  53.       <li class="box-min">
  54.         <a href="">电子产品</a>
  55.         <ul style="display: none;">
  56.           <li><a href="">电脑</a></li>
  57.           <li><a href="">手机</a></li>
  58.           <li><a href="">平板</a></li>
  59.         </ul>
  60.       </li>
  61.       <li class="box-min"><a href="">服饰鞋包</a></li>
  62.       <li class="box-min">
  63.         <a href="">百科图书</a>
  64.         <ul style="display: none;">
  65.           <li><a href="">军事百科</a></li>
  66.           <li><a href="">动物百科</a></li>
  67.           <li><a href="">历史人物百科</a></li>
  68.           <li><a href="">战争百科</a></li>
  69.         </ul>
  70.       </li>
  71.       <li class="box-min"><a href="">日货零食</a></li>
  72.     </ul>
  73.   </body>
  74.   <!-- js部分代码 -->
  75.   <script>
  76.     //  1. 定义常量获取所有的一级li
  77.     const navs = document.querySelectorAll(".box1 > li");
  78.     //  2. 循环常量里所有的li并取到当前li
  79.     navs.forEach(function (nav) {
  80.       // 3. 给循环当前元素绑定监听事件
  81.       // (1) 鼠标移入 显示当前一级菜单下的子菜单 mouseover:鼠标移入事件属性
  82.       nav.addEventListener("mouseover", shownav);
  83.       // (2) 鼠标移出 隐藏当前一级菜单下的子菜单 mouseout:鼠标移出事件属性
  84.       nav.addEventListener("mouseout", hidenav);
  85.     });
  87.     // 4.创建显示和隐藏函数 shownav hidenav
  88.     // (1)显示子菜单
  89.     function shownav(ev) {
  90.       if (ev.target.nextElementSibling !== null) {
  91.         ev.target.nextElementSibling.style.display = "block";
  92.       }
  93.     }
  94.     // (2)隐藏子菜单
  95.     function hidenav(ev) {
  96.       if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  97.         ev.target.nextElementSibling.style.display = "none";
  98.       }
  99.     }
  100.   </script>
  101.    <!-- js部分代码 -->
  102. </html>

效果如下：

完美结束！！！

小结：

1.重点理解css定位
2.会使用js经常使用到的事件 如 点击事件 移出移入事件等
3.一定要注重实践 多敲代码多结合知识点做demo
4.一起等你键盘敲烂 月薪十万！！！

上一条：如何编写一个专业实用的导航下拉菜单？下一条：模仿php中文网简易版导航栏的下拉菜单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多