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。

相关文章

Spring Boot集成/输出/日志级别控制/持久化开发实践

Spring Boot集成/输出/日志级别控制/持久化开发实践

《SpringBoot集成/输出/日志级别控制/持久化开发实践》SpringBoot默认集成Logback,支持灵活日志级别配置（INFO/DEBUG等）,输出包含时间戳、级别、类名等信息,并可通过... 目录一、日志概述1.1、Spring Boot日志简介1.2、日志框架与默认配置1.3、日志的核心作用
阅读更多...
Python使用Tenacity一行代码实现自动重试详解

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门：一行代码实现优雅重试精细控制：让重试按我
阅读更多...
破茧 JDBC:MyBatis 在 Spring Boot 中的轻量实践指南

破茧 JDBC:MyBatis 在 Spring Boot 中的轻量实践指南

《破茧JDBC:MyBatis在SpringBoot中的轻量实践指南》MyBatis是持久层框架,简化JDBC开发,通过接口+XML/注解实现数据访问,动态代理生成实现类,支持增删改查及参数... 目录一、什么是 MyBATis二、 MyBatis 入门2.1、创建项目2.2、配置数据库连接字符串2.3、入
阅读更多...
Springboot项目启动失败提示找不到dao类的解决

Springboot项目启动失败提示找不到dao类的解决

《Springboot项目启动失败提示找不到dao类的解决》SpringBoot启动失败,因ProductServiceImpl未正确注入ProductDao,原因：Dao未注册为Bean,解决：在启... 目录错误描述原因解决方法总结***************************APPLICA编
阅读更多...
深度解析Spring Security 中的 SecurityFilterChain核心功能

深度解析Spring Security 中的 SecurityFilterChain核心功能

《深度解析SpringSecurity中的SecurityFilterChain核心功能》SecurityFilterChain通过组件化配置、类型安全路径匹配、多链协同三大特性,重构了Spri... 目录Spring Security 中的SecurityFilterChain深度解析一、Security
阅读更多...
Redis客户端连接机制的实现方案

Redis客户端连接机制的实现方案

《Redis客户端连接机制的实现方案》本文主要介绍了Redis客户端连接机制的实现方案,包括事件驱动模型、非阻塞I/O处理、连接池应用及配置优化,具有一定的参考价值,感兴趣的可以了解一下... 目录1. Redis连接模型概述2. 连接建立过程详解2.1 连php接初始化流程2.2 关键配置参数3. 最大连
阅读更多...
SpringBoot多环境配置数据读取方式

SpringBoot多环境配置数据读取方式

《SpringBoot多环境配置数据读取方式》SpringBoot通过环境隔离机制,支持properties/yaml/yml多格式配置,结合@Value、Environment和@Configura... 目录一、多环境配置的核心思路二、3种配置文件格式详解2.1 properties格式（传统格式）1.
阅读更多...
Apache Ignite 与 Spring Boot 集成详细指南

Apache Ignite 与 Spring Boot 集成详细指南

《ApacheIgnite与SpringBoot集成详细指南》ApacheIgnite官方指南详解如何通过SpringBootStarter扩展实现自动配置,支持厚/轻客户端模式,简化Ign... 目录 一、背景：为什么需要这个集成？ 二、两种集成方式（对应两种客户端模型） 三、方式一：自动配置 Thick
阅读更多...
Python实现网格交易策略的过程

Python实现网格交易策略的过程

《Python实现网格交易策略的过程》本文讲解Python网格交易策略,利用ccxt获取加密货币数据及backtrader回测,通过设定网格节点,低买高卖获利,适合震荡行情,下面跟我一起看看我们的第一... 网格交易是一种经典的量化交易策略，其核心思想是在价格上下预设多个“网格”，当价格触发特定网格时执行买
阅读更多...
Spring WebClient从入门到精通

Spring WebClient从入门到精通

《SpringWebClient从入门到精通》本文详解SpringWebClient非阻塞响应式特性及优势,涵盖核心API、实战应用与性能优化,对比RestTemplate,为微服务通信提供高效解决... 目录一、WebClient 概述1.1 为什么选择 WebClient？1.2 WebClient 与
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2