JavaScript 实现网页菜单延迟加载效果》

2024-09-06 08:12
文章标签 java 网页 实现 加载 script 效果 菜单 延迟

本文主要是介绍JavaScript 实现网页菜单延迟加载效果》，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

一、整体代码结构

二、代码注解

1. HTML 结构部分

2. CSS 样式部分

3. JavaScript 部分

一、整体代码结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- defer延迟加载只针对外引 --><script>//JavaScript延迟加载window.onload=function(){var first_li=document.querySelectorAll(".main>li")for(var i = 0; i<first_li.length; i++){first_li[i].onmouseenter =function(){if(this.querySelector("ul")){// this.querySelector("ul").style.display= "block"//获取盒子的高度var second_li=this.querySelectorAll("ul li")var sum_height = 0for(var j = 0;j < second_li.length; j++){sum_height += second_li[j].clientHeight}this.querySelector("ul").style.height = sum_height+ "px"}}first_li[i].onmouseleave =function(){if(this.querySelector("ul")){// this.querySelector("ul").style.display= "none"this.querySelector("ul").style.height = "0px"//延迟定时器//setTimeoutsetTimeout(function(){var second_ul=document.querySelector(".main ul")for(var m=0;j<second_ul.length;m++){second_ul[m].style.display= "none"}},2000)}}}}</script><style>*{padding: 0;margin: 0;transition:  all 1s ease;}a{text-decoration: none;}li{list-style: none;}.content{margin: 80px auto;background: red;}.main{width: 80%;margin: 0px auto;display: flex;justify-content: space-between;}.main>li{position: relative;}.main>li ul{/* display: none; */height: 0px;position: absolute;background: red;}.main>li a{color: aliceblue;padding: 8px;display: block;}.main>li a:hover{color: red;background: floralwhite;}</style>
</head>
<body><div class="content"><ul class="main"><li><a href="#">首页</a></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li></ul></div>
</body>
</html>

二、代码注解

1. HTML 结构部分

  • <meta charset="UTF-8">：设置页面的字符编码为 UTF-8，以支持多种语言字符的显示。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：用于设置移动端的视口属性，确保页面在不同设备上都能良好显示。
  • <title>Document</title>：设置页面的标题，显示在浏览器标签页上。
  • <div class="content">：一个容器元素，用于包裹菜单列表。
  • <ul class="main">：主菜单列表，包含多个<li>元素，每个<li>元素代表一个菜单项。

2. CSS 样式部分

  • * { padding: 0; margin: 0; transition: all 1s ease; }：重置所有元素的内边距和外边距为 0，并设置了一个通用的过渡效果，使元素的属性变化更加平滑。
  • a { text-decoration: none; }：去除链接的下划线。
  • li { list-style: none; }：去除列表项的默认标记。
  • .content { margin: 80px auto; background: red; }：设置容器的外边距为上下 80 像素，左右自动居中，并设置背景颜色为红色。
  • .main { width: 80%; margin: 0px auto; display: flex; justify-content: space-between; }：设置主菜单列表的宽度为页面宽度的 80%，水平居中显示，并使用 flex 布局使菜单项平均分布。
  • .main>li { position: relative; }：设置主菜单列表项为相对定位，为子菜单的绝对定位提供参考。
  • .main>li ul { display: none; height: 0px; position: absolute; background: red; }：设置子菜单列表初始状态为隐藏，高度为 0，绝对定位，并设置背景颜色为红色。
  • .main>li a { color: aliceblue; padding: 8px; display: block; }：设置主菜单链接的颜色为白色，内边距为 8 像素，以块级元素显示。
  • .main>li a:hover { color: red; background: floralwhite; }：设置主菜单链接在鼠标悬停时的颜色为红色，背景颜色为花白色。

3. JavaScript 部分

  • window.onload = function () {...}：在页面加载完成后执行的函数。确保页面的 DOM 结构完全加载后再执行 JavaScript 代码，避免因 DOM 元素未加载而导致的错误。
  • var first_li = document.querySelectorAll(".main>li");：使用querySelectorAll方法获取所有类名为main的元素下的直接子元素<li>，即主菜单列表项。
  • for (var i = 0; i < first_li.length; i++) {...}：遍历所有主菜单列表项。
  • first_li[i].onmouseenter = function () {...}：为主菜单列表项添加鼠标移入事件监听器。当鼠标移入时，执行以下操作：
    • if (this.querySelector("ul")) {...}：检查当前主菜单列表项是否包含子菜单<ul>。
    • this.querySelector("ul").style.display = "block";：如果有子菜单，将子菜单的显示属性设置为block，使其显示出来。
    • var second_li = this.querySelectorAll("ul li");：获取当前主菜单列表项下的子菜单列表项。
    • var sum_height = 0; for (var j = 0; j < second_li.length; j++) { sum_height += second_li[j].clientHeight; }：计算子菜单列表项的总高度。
    • this.querySelector("ul").style.height = sum_height + "px";：将子菜单的高度设置为计算得到的总高度，实现子菜单的平滑展开效果。
  • first_li[i].onmouseleave = function () {...}：为主菜单列表项添加鼠标移出事件监听器。当鼠标移出时，执行以下操作：
    • if (this.querySelector("ul")) {...}：检查当前主菜单列表项是否包含子菜单<ul>。
    • this.querySelector("ul").style.height = "0px";：将子菜单的高度设置为 0，使其逐渐隐藏。
    • setTimeout(function () {...}, 1000);：设置一个延迟定时器，在 1 秒后执行回调函数。
    • var second_ul = document.querySelectorAll(".main ul"); for (var j = 0; j < second_ul.length; j++) { second_ul[j].style.display = "none"; }：获取所有主菜单列表项下的子菜单<ul>，并将其显示属性设置为none，确保子菜单完全隐藏。

这篇关于JavaScript 实现网页菜单延迟加载效果》的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1141475。

相关文章

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》：本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI
阅读更多...
Python脚本实现自动删除C盘临时文件夹

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用
阅读更多...
Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
java图像识别工具类(ImageRecognitionUtils)使用实例详解

java图像识别工具类(ImageRecognitionUtils)使用实例详解

《java图像识别工具类(ImageRecognitionUtils)使用实例详解》：本文主要介绍如何在Java中使用OpenCV进行图像识别,包括图像加载、预处理、分类、人脸检测和特征提取等步骤... 目录前言1. 图像识别的背景与作用2. 设计目标3. 项目依赖4. 设计与实现 ImageRecogni
阅读更多...
Java中Springboot集成Kafka实现消息发送和接收功能

Java中Springboot集成Kafka实现消息发送和接收功能

《Java中Springboot集成Kafka实现消息发送和接收功能》Kafka是一个高吞吐量的分布式发布-订阅消息系统,主要用于处理大规模数据流,它由生产者、消费者、主题、分区和代理等组件构成,Ka... 目录一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者一、Kaf
阅读更多...
Java访问修饰符public、private、protected及默认访问权限详解

Java访问修饰符public、private、protected及默认访问权限详解

《Java访问修饰符public、private、protected及默认访问权限详解》：本文主要介绍Java访问修饰符public、private、protected及默认访问权限的相关资料,每... 目录前言1. public 访问修饰符特点：示例：适用场景：2. private 访问修饰符特点：示例：
阅读更多...
详解Java如何向http/https接口发出请求

详解Java如何向http/https接口发出请求

《详解Java如何向http/https接口发出请求》这篇文章主要为大家详细介绍了Java如何实现向http/https接口发出请求,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用Java发送web请求所用到的包都在java.net下，在具体使用时可以用如下代码，你可以把它封装成一
阅读更多...
使用Python实现在Word中添加或删除超链接

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中，超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超
阅读更多...
windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2