引言：为什么需要H5响应式页面？
- 移动端趋势：移动设备用户占比超90%，传统PC端页面易出现布局错乱
- 用户体验提升：统一视觉效果减少用户跳出率，适配微信、APP等多端场景
- 开发效率优化：通过媒体查询、弹性布局等技术降低多端适配成本
通过之前对HTML,CSS,JavaScript的理解，我们学习了多种不同的布局方式。我们学习布局是为了解决页面样式的问题。我们知道HTML5不仅仅可以在电脑端显示，而且它还可以在手机端和平板端显示，但是我们会发现一个问题，当我们在电脑端调整好的页面在其他的设备上显示的时候样式会出现变化，从而导致显示内容的错乱为了解决在不同设备上显示的问题，我们接下来学习以下自适应布局。在学习这一个自适应布局之前我们需要先学习两个比较重要的知识点: 视口和媒体查询
1.视口(viewport)
(1).视口概述
视口（viewport）可理解为网页内容在浏览器中实际呈现的可视区域，其范围通常覆盖屏幕显示区域,但不包含浏览器菜单、工具栏等UI元素
在移动端开发中，视口分为三种类型：
- 布局视口（默认宽度约980px，用于适配PC端网页）
- 视觉视口（用户当前缩放后的可见区域）
- 理想视口（设备屏幕宽度与布局视口一致，实现无缩放的完美显示）
简言之，视口即设备屏幕上能够完整展示网页内容的动态区域
其宽度通过:
<meta name="viewport"> <!-- 标签配置，确保页面在不同设备上呈现最佳效果 -->(2).视口(viewport)相关代码以及参数设置
视口核心代码:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />视口核心代码(没有特殊要求的话这样即可):
<meta name="viewport" content="width=device-width, initial-scale=1.0">viewport参数详解:
width
作用: 设置布局视口宽度，可选值为正整数或device-width（设备屏幕宽度）
示例: width=device-width表示视口宽度与设备屏幕一致，避免页面压缩变形
initial-scale
作用: 定义页面初始缩放比例（0-10.0），数值越大缩放比例越小
默认值: 1.0（无缩放）
minimum-scale
作用: 设置用户可缩放的最小比例，需小于等于maximum-scale。
示例: minimum-scale=0.5表示最小缩放至50%。
maximum-scale
作用：设置用户可放大的最大比例，需大于等于minimum-scale。
示例：maximum-scale=2.0表示最大放大至200%。
user-scalable
作用：控制是否允许用户手动缩放，取值为yes或no。
示例：user-scalable=no禁止缩放，提升页面展示一致性。
2.媒体查询(@media)
(1)媒体查询概述
媒体查询是CSS3技术，通过检测设备特性（如屏幕尺寸、方向）动态调整样式，实现响应式设计。
例如，当屏幕宽度小于600px时，可通过媒体查询自动调整布局或字体大小，确保页面在手机、平板等设备上均能良好呈现。
(2)媒体查询语法格式
媒体查询的基本语法规则：
@media 媒体类型 [only | not] (条件组合) {
/* CSS 样式规则 */
}
媒体类型参数：
all（所有设备）
handheld（手持设备）
print（打印场景）
screen（屏幕设备）
tv（电视）
braille（盲文设备)
逻辑运算符,组合多条件查询：
and（与）
or（或）
not（非）
注：实际开发中通常统一指定为 all，以覆盖全设备类型。多个条件示例：
你可以通过 and(与),or（或）,not（非） 关键字结合多个条件。
例如当屏幕宽度在 600px 到 900px 之间时调整字体大小：
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
这个规则会在屏幕宽度小于 600px 或者设备处于竖屏模式时触发。
@media screen and (max-width: 600px), screen and (orientation: portrait) {
/* 样式规则 */
}
这个规则会在屏幕宽度不小于 600px 时触发。
@media not screen and (max-width: 600px) {
/* 样式规则 */
}(3)不同设备的宽度大小
/* 手机端适配（横竖屏通用） */
@media (max-width: 480px) {
/* 样式规则 */
}
/* iPad端适配（横竖屏通用） */
@media (min-width: 481px) and (max-width: 1024px) {
/* 样式规则 */
} 常见问题与注意事项:
1. 在编写多个 @media 规则时，顺序很重要。后面的规则会覆盖前面的规则，因此需要确保逻辑正确。
2. 推荐采用“移动优先”的设计原则，即先编写小屏幕的样式，再通过 min-width 逐步适配大屏幕。
3.响应式布局相关案例
简便版(+样式优化版-在线预览)
<!-- 声明文档类型为HTML5 -->
<!DOCTYPE html>
<!-- 设置网页语言为中文 -->
<html lang="zh-CN">
<head>
<!-- 设置字符编码为UTF-8，确保正确显示中文字符 -->
<meta charset="UTF-8">
<!-- 设置视口，确保响应式布局在移动设备上正常工作，initial-scale=1.0表示初始缩放比例为1 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题：显示在浏览器标签页上 -->
<title>响应式HTML5页面</title>
<style>
/* CSS样式重置：移除默认边距和内边距，统一盒模型计算方式 */
* {
margin: 0; /* 外边距清零 */
padding: 0; /* 内边距清零 */
box-sizing: border-box; /* 使用border-box盒模型，更容易计算元素尺寸 */
}
/* 全局样式设置：定义网页的基本文字样式 */
body {
font-family: 'Microsoft YaHei', sans-serif; /* 优先使用微软雅黑字体，如果不可用则使用无衬线字体 */
line-height: 1.6; /* 设置行高为字体大小的1.6倍，提高可读性 */
color: #333; /* 设置文字颜色为深灰色，避免纯黑色过于刺眼 */
}
/* 导航栏样式：创建固定在顶部的导航条 */
.navbar {
background-color: #333; /* 深灰色背景 */
padding: 1rem; /* 四周填充1rem空间 */
position: fixed; /* 固定定位，使导航栏始终显示在顶部 */
width: 100%; /* 宽度占满整个视口 */
top: 0; /* 固定在顶部 */
z-index: 1000; /* 设置层级，确保导航栏显示在其他内容之上 */
}
/* 导航列表样式：使用Flex布局创建水平导航菜单 */
.nav-list {
display: flex; /* 启用Flex布局 */
justify-content: flex-end; /* 将导航项目靠右对齐 */
list-style: none; /* 移除列表项的默认圆点 */
max-width: 1200px; /* 限制最大宽度，优化大屏幕显示 */
margin: 0 auto; /* 水平居中 */
}
/* 导航链接样式：美化导航项的外观 */
.nav-item a {
color: white; /* 链接文字设为白色 */
text-decoration: none; /* 移除下划线 */
padding: 0.5rem 1rem; /* 设置内边距增加可点击区域 */
transition: color 0.3s; /* 添加颜色过渡动画效果 */
}
/* 导航链接悬停效果：鼠标悬停时改变颜色 */
.nav-item a:hover {
color: #00bcd4; /* 悬停时变为青色 */
}
/* 汉堡菜单按钮：移动端的导航切换按钮 */
.menu-toggle {
display: none; /* 默认隐藏，在移动端才显示 */
flex-direction: column; /* 垂直排列三条线 */
cursor: pointer; /* 鼠标悬停时显示手型光标 */
}
/* 汉堡菜单按钮的横线样式 */
.menu-toggle span {
height: 3px; /* 线条高度 */
width: 25px; /* 线条宽度 */
background-color: white; /* 白色线条 */
margin: 2px 0; /* 线条之间的间距 */
transition: 0.3s; /* 添加过渡动画效果 */
}
/* 主要内容区样式：调整与导航栏的间距 */
.main-content {
margin-top: 60px; /* 上边距等于导航栏高度，防止内容被导航栏遮挡 */
padding: 2rem; /* 四周添加内边距 */
}
/* 英雄区域样式：创建醒目的页面头部区域 */
.hero {
text-align: center; /* 文字居中对齐 */
padding: 4rem 2rem; /* 上下4rem，左右2rem的内边距 */
background-color: #f5f5f5; /* 浅灰色背景 */
}
/* 英雄区域标题样式 */
.hero h1 {
font-size: 2.5rem; /* 设置标题字体大小 */
margin-bottom: 1rem; /* 底部外边距 */
color: #2c3e50; /* 深蓝灰色文字 */
}
/* 特色卡片区域样式：使用Flex布局创建响应式网格 */
.features {
display: flex; /* 启用Flex布局 */
flex-wrap: wrap; /* 允许卡片换行 */
justify-content: center; /* 水平居中对齐 */
gap: 2rem; /* 卡片之间的间距 */
padding: 4rem 2rem; /* 区域内边距 */
max-width: 1200px; /* 限制最大宽度 */
margin: 0 auto; /* 水平居中 */
}
/* 特色卡片样式：设置卡片的外观和布局 */
.feature-card {
flex: 1 1 300px; /* 弹性增长和收缩比例，基础宽度300px */
background: white; /* 白色背景 */
padding: 2rem; /* 内边距 */
border-radius: 8px; /* 圆角边框 */
box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 添加阴影效果 */
text-align: center; /* 文字居中 */
}
/* 页脚样式：设置页面底部样式 */
.footer {
background-color: #333; /* 深灰色背景 */
color: white; /* 白色文字 */
text-align: center; /* 文字居中 */
padding: 2rem; /* 内边距 */
margin-top: 2rem; /* 与上方内容的间距 */
}
/* 响应式布局 - 平板设备 (768px及以下) */
@media (max-width: 768px) {
/* 导航列表在移动端的样式调整 */
.nav-list {
display: none; /* 默认隐藏导航菜单 */
flex-direction: column; /* 改为垂直排列 */
width: 100%; /* 宽度占满 */
text-align: center; /* 文字居中 */
}
/* 导航列表激活时的样式 */
.nav-list.active {
display: flex; /* 显示菜单 */
}
/* 显示汉堡菜单按钮 */
.menu-toggle {
display: flex; /* 在移动端显示汉堡菜单 */
}
/* 调整英雄区域标题大小 */
.hero h1 {
font-size: 2rem; /* 减小标题字体大小 */
}
/* 特色卡片在移动端的宽度调整 */
.feature-card {
flex: 1 1 100%; /* 卡片占满整行 */
}
}
/* 响应式布局 - 移动设备 (480px及以下) */
@media (max-width: 480px) {
/* 调整英雄区域在小屏幕上的内边距 */
.hero {
padding: 2rem 1rem; /* 减小内边距 */
}
/* 进一步减小标题字体大小 */
.hero h1 {
font-size: 1.5rem; /* 更小的标题字体 */
}
/* 调整特色区域在小屏幕上的内边距 */
.features {
padding: 2rem 1rem; /* 减小内边距 */
}
}
</style>
</head>
<body>
<!-- 导航栏：固定在顶部的响应式导航菜单 -->
<nav class="navbar">
<!-- 汉堡菜单按钮：在移动端显示的三条横线按钮 -->
<div class="menu-toggle" id="menuToggle">
<span></span> <!-- 第一条横线 -->
<span></span> <!-- 第二条横线 -->
<span></span> <!-- 第三条横线 -->
</div>
<!-- 导航列表：包含网站的主要导航链接 -->
<ul class="nav-list" id="navList">
<li class="nav-item"><a href="#home">首页</a></li> <!-- 首页链接 -->
<li class="nav-item"><a href="#features">特色</a></li> <!-- 特色链接 -->
<li class="nav-item"><a href="#about">关于</a></li> <!-- 关于链接 -->
<li class="nav-item"><a href="#contact">联系我们</a></li> <!-- 联系我们链接 -->
</ul>
</nav>
<!-- 主要内容区：包含网站的主要内容部分 -->
<main class="main-content">
<!-- 英雄区域：网站的主要展示区域，包含标题和简介 -->
<section class="hero" id="home">
<h1>欢迎来到我的响应式网站</h1> <!-- 主标题 -->
<p>这是一个现代化的HTML5响应式网站示例</p> <!-- 副标题/简介 -->
</section>
<!-- 特色内容区域：展示网站的主要特点 -->
<section class="features" id="features">
<!-- 响应式设计特色卡片 -->
<div class="feature-card">
<h2>响应式设计</h2>
<p>适配各种设备屏幕尺寸</p>
</div>
<!-- 现代布局特色卡片 -->
<div class="feature-card">
<h2>现代布局</h2>
<p>使用Flex布局实现灵活的内容排列</p>
</div>
<!-- 用户体验特色卡片 -->
<div class="feature-card">
<h2>用户体验</h2>
<p>注重交互设计和视觉效果</p>
</div>
</section>
</main>
<!-- 页脚：包含版权信息 -->
<footer class="footer">
<p>© 2024 响应式HTML5示例. All rights reserved.</p> <!-- 版权声明 -->
</footer>
<!-- JavaScript代码：处理交互逻辑 -->
<script>
// 获取DOM元素：汉堡菜单按钮和导航列表
const menuToggle = document.getElementById('menuToggle'); // 获取汉堡菜单按钮元素
const navList = document.getElementById('navList'); // 获取导航列表元素
// 为汉堡菜单按钮添加点击事件监听器
menuToggle.addEventListener('click', () => {
navList.classList.toggle('active'); // 切换导航列表的显示状态
});
// 为所有导航链接添加点击事件监听器
// 在移动端视图下点击导航链接时自动关闭菜单
document.querySelectorAll('.nav-item a').forEach(link => {
link.addEventListener('click', () => {
if (window.innerWidth <= 768) { // 检查是否在移动端视图
navList.classList.remove('active'); // 关闭导航菜单
}
});
});
</script>
</body>
</html>+样式优化版
在线预览:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置文档字符编码和视口 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单页面滚动HTML5模板</title>
</head>
<style>
/* 全局样式：重置默认样式并设置基本过渡效果 */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 使元素的内边距和边框包含在宽度和高度内 */
transition: all 0.3s ease; /*为所有属性添加平滑过渡效果*/
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
overflow-x: hidden; /* 防止水平滚动条出现 */
}
/* 导航栏样式：固定定位、半透明背景和阴影效果 */
#navbar {
position: fixed; /* 固定在视口顶部 */
height: 68px;
top: 0;
left: 0;
width: 100%;
background-color: rgba(51, 51, 51, 0.95); /* 半透明背景 */
color: white;
z-index: 1000; /* 确保导航栏始终显示在最上层 */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 添加轻微阴影效果 */
transition: all 0.3s ease; /* 平滑过渡效果 */
}
/* 导航菜单布局：弹性盒子居中对齐 */
#navbar ul {
list-style: none;
display: flex;
justify-content: center;
padding: 0;
max-width: 1200px;
margin: 0 auto;
}
#navbar ul li {
margin: 0 20px;
position: relative;
}
/* 导航链接样式和悬停效果 */
#navbar ul li a {
color: white;
text-decoration: none;
padding: 20px 15px;
display: block;
font-weight: 500;
position: relative;
}
/* 导航链接悬停动画：下划线效果 */
#navbar ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: #fff;
transition: all 0.3s ease;
transform: translateX(-50%); /* 居中定位 */
}
#navbar ul li a:hover::after {
width: 100%; /* 悬停时展开下划线 */
}
/* 页面部分通用样式：垂直居中布局 */
section {
padding: 80px 20px;
min-height: 100vh; /* 确保每个部分至少占满一屏 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
overflow: hidden;
}
/* 标题和段落样式 */
section h1, section h2 {
margin-bottom: 30px;
font-size: 2.5em;
color: #333;
position: relative;
}
section p {
max-width: 800px; /* 限制文本宽度，提高可读性 */
margin: 0 auto;
font-size: 1.1em;
color: #666;
line-height: 1.8;
}
/* 各部分背景渐变效果 */
#home {
background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
color: white;
}
#about {
background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
color: white;
}
#services {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
color: white;
}
#contact {
background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
color: white;
}
/* 添加卡片容器样式 */
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-top: 40px;
width: 100%;
max-width: 1200px;
}
.card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
border-radius: 20px;
padding: 30px;
width: 300px;
text-align: left;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
}
.card h3 {
font-size: 1.5em;
margin-bottom: 15px;
color: white;
}
.card p {
color: rgba(255, 255, 255, 0.9);
font-size: 1em;
line-height: 1.6;
}
/* 图标样式 */
.icon {
font-size: 2.5em;
margin-bottom: 20px;
color: white;
}
/* 汉堡菜单按钮样式 */
.menu-toggle {
display: none; /* 默认隐藏汉堡菜单按钮 */
cursor: pointer;/* 鼠标悬停时显示指针 */
padding: 15px; /* 内边距 */
position: absolute; /* 绝对定位 */
right: 15px;
top: 50%;
transform: translateY(-50%); /* 垂直居中 */
}
.menu-toggle span {
display: block;
width: 25px;
height: 3px;
background-color: white;
margin: 5px 0;
transition: all 0.3s ease;
}
/* 响应式设计：平板设备（768px及以下） */
@media (max-width: 768px) {
#navbar {
padding: 10px 0;
}
/* 显示汉堡菜单按钮 */
.menu-toggle {
display: block;
}
/* 导航菜单改为垂直布局并默认隐藏 */
#navMenu {
display: none; /* 默认隐藏菜单 */
flex-direction: column;
background-color: rgba(51, 51, 51, 0.98);
padding: 20px 0;
width: 100%;
position: absolute;
top: 100%;
left: 0;
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* 菜单展开时的样式 */
#navMenu.active {
display: flex;
opacity: 1;
transform: translateY(0);
}
#navbar ul li {
margin: 5px 0;
width: 100%;
text-align: center;
}
#navbar ul li a {
padding: 12px 15px;
}
/* 汉堡菜单按钮动画效果 */
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
/* 调整标题和段落大小 */
section h1 {
font-size: 2em;
}
section h2 {
font-size: 1.8em;
}
section p {
font-size: 1em;
padding: 0 15px;
}
}
/* 响应式设计：移动设备（480px及以下） */
@media (max-width: 480px) {
section {
padding: 60px 15px;
}
/* 进一步缩小标题大小 */
section h1 {
font-size: 1.8em;
}
section h2 {
font-size: 1.5em;
}
}
</style>
<body>
<!-- 导航栏：固定在页面顶部的响应式导航菜单 -->
<nav id="navbar">
<!-- 汉堡菜单按钮：仅在移动端显示 -->
<div class="menu-toggle" id="menuToggle">
<span></span>
<span></span>
<span></span>
</div>
<!-- 导航菜单：在移动端可折叠 -->
<ul id="navMenu">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
<!-- 首页部分：展示网站主要信息 -->
<section id="home">
<h1>欢迎来到我们的单页面网站</h1>
<p>探索创新科技，引领数字未来</p>
<div class="card-container">
<div class="card">
<div class="icon">🚀</div>
<h3>创新技术</h3>
<p>采用最新技术栈，打造卓越的用户体验</p>
</div>
<div class="card">
<div class="icon">💡</div>
<h3>解决方案</h3>
<p>为您的业务提供量身定制的解决方案</p>
</div>
<div class="card">
<div class="icon">🌟</div>
<h3>优质服务</h3>
<p>专业的团队为您提供全方位支持</p>
</div>
</div>
</section>
<!-- 关于我们部分：介绍公司或团队信息 -->
<section id="about">
<h2>关于我们</h2>
<p>我们是一支充满激情的团队，致力于为客户创造价值</p>
<div class="card-container">
<div class="card">
<div class="icon">👥</div>
<h3>专业团队</h3>
<p>拥有丰富经验的技术专家团队</p>
</div>
<div class="card">
<div class="icon">🎯</div>
<h3>使命愿景</h3>
<p>以创新技术推动行业发展</p>
</div>
</div>
</section>
<!-- 服务部分：展示提供的服务内容 -->
<section id="services">
<h2>我们的服务</h2>
<p>为您提供全方位的技术服务支持</p>
<div class="card-container">
<div class="card">
<div class="icon">💻</div>
<h3>网站开发</h3>
<p>响应式网站设计与开发</p>
</div>
<div class="card">
<div class="icon">📱</div>
<h3>移动应用</h3>
<p>iOS和Android应用开发</p>
</div>
<div class="card">
<div class="icon">🛡️</div>
<h3>网络安全</h3>
<p>全面的网络安全解决方案</p>
</div>
</div>
</section>
<!-- 联系我们部分：提供联系方式 -->
<section id="contact">
<h2>联系我们</h2>
<p>随时恭候您的咨询，为您提供专业服务</p>
<div class="card-container">
<div class="card">
<div class="icon">📧</div>
<h3>电子邮件</h3>
<p>contact@example.com</p>
</div>
<div class="card">
<div class="icon">📞</div>
<h3>联系电话</h3>
<p>+86 123 4567 8900</p>
</div>
</div>
</section>
<!-- 引入JavaScript文件，实现交互功能 -->
<script>
// 平滑滚动功能：为所有锚点链接添加平滑滚动效果
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault(); // 阻止默认的跳转行为
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth' // 使用平滑滚动效果
});
});
});
// 导航栏滚动效果：根据滚动方向显示/隐藏导航栏
let prevScrollpos = window.pageYOffset;
window.onscroll = function() {
const currentScrollPos = window.pageYOffset;
const navbar = document.getElementById('navbar');
// 向上滚动显示导航栏，向下滚动隐藏导航栏
// 通过比较前后滚动位置来判断滚动方向
if (prevScrollpos > currentScrollPos) {
navbar.style.top = '0'; // 显示导航栏
} else {
navbar.style.top = '-100px'; // 隐藏导航栏
}
prevScrollpos = currentScrollPos;
// 根据滚动位置改变导航栏样式
// 当滚动超过100px时，增加背景透明度和阴影效果
if (currentScrollPos > 100) {
navbar.style.backgroundColor = 'rgba(51, 51, 51, 0.98)';
navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.3)';
} else {
navbar.style.backgroundColor = 'rgba(51, 51, 51, 0.95)';
navbar.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
}
};
// 移动端导航栏交互：汉堡菜单按钮点击事件和菜单展开/收起动画
const navbar = document.getElementById('navbar');
const menuToggle = document.getElementById('menuToggle');
const navMenu = document.getElementById('navMenu');
const navLinks = navMenu.getElementsByTagName('a');
// 为汉堡菜单按钮添加点击事件
menuToggle.addEventListener('click', function(e) {
e.stopPropagation(); // 阻止事件冒泡
toggleMenu();
});
// 点击页面任意位置关闭菜单
document.addEventListener('click', function(e) {
if (navMenu.classList.contains('active') && !navMenu.contains(e.target)) {
toggleMenu();
}
});
// 菜单切换函数
function toggleMenu() {
menuToggle.classList.toggle('active');
navMenu.classList.toggle('active');
}
// 为每个导航链接添加点击事件
for (let i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', function() {
// 仅在移动端视图下执行动画
if (window.innerWidth <= 768) {
// 关闭菜单
toggleMenu();
// 导航栏动画效果
navbar.style.top = '-100px'; // 先隐藏导航栏
setTimeout(() => {
navbar.style.top = '0'; // 0.5秒后重新显示导航栏
}, 500);
}
});
}
</script>
</body>
</html>PC端
移动端
ipad端
扫一扫
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
