【HTML】JavaScript 实现自适应响应式导航栏

1. 简介

利用 HTML 实现了一个简单的响应式导航栏，它能够根据屏幕大小调整其显示状态，并通过 JavaScript 实现收缩与折叠功能。

2. 实现效果

1. 当网页宽度大于 600px 时，导航栏状横向展开，态如下：

在这里插入图片描述

2. 当网页宽度小于 600px 时，导航栏横向收缩，状态如下：

在这里插入图片描述

3. 当网页宽度小于 600px 时，点击 ☰ 按钮，导航栏纵向展开：

在这里插入图片描述

3. 程序解析

3.1 文档类型声明

<!DOCTYPE html>

这是文档类型声明，它告诉浏览器该文档是一个 HTML5文档。

3.2 HTML根元素

<html lang="en">

<html>标签是所有其他 HTML元素的父元素。lang="en"属性指定了文档的语言是英语。

3.3 文档头部

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 基本样式 */
body {margin: 0;font-family: Arial, sans-serif;
}
/* 导航栏样式 */
#navbar {background-color: #333;overflow: hidden;
}
#navbar a {float: left;display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;
}
/* 折叠按钮样式 */
.toggle-button {float: right;display: none;color: lightgreen;text-align: center;padding: 14px 16px;text-decoration: none;font-size: 30px;cursor: pointer;
}
/* 响应式布局 - 当屏幕宽度小于600px时，将导航链接堆叠到按钮上方 */
@media screen and (max-width: 600px) {#navbar a, .toggle-button {float: none;display: block;text-align: left;}.links {display: none;}
}
</style>
</head>

<meta charset="UTF-8">: 设置文档的字符编码为 UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口，确保在移动设备上正确显示。
<style>: 包含了 CSS样式，用于美化网页。
- body样式：设置整个页面的边距和字体。
- #navbar样式：定义导航栏的背景颜色和溢出隐藏。
- #navbar a样式：定义导航链接的布局和外观。
- .toggle-button样式：定义折叠按钮的外观，初始状态下不显示。
- 媒体查询：当屏幕宽度小于 600px时，调整导航栏的布局，使链接堆叠在折叠按钮上方，并且默认不显示链接。

3.4 文档主体

<body>
<nav id="navbar"><button class="toggle-button" onclick="toggleMenu()">☰</button><div class="links"><a href="#home">Home</a><a href="#about">About</a><a href="#contact">Contact</a></div>
</nav>
<script>
function toggleMenu() {var links = document.querySelector('.links');if (links.style.display === 'block') {links.style.display = 'none';} else {links.style.display = 'block';}
}
// 当窗口大小改变时，如果屏幕宽度大于600px，则显示导航链接
window.onresize = function() {if (window.innerWidth > 600) {document.querySelector('.links').style.display = 'block';} else {document.querySelector('.links').style.display = 'none';}
};
</script>
</body>

<nav id="navbar">: 定义了一个导航栏，包含一个折叠按钮和三个导航链接。
<button class="toggle-button" onclick="toggleMenu()">☰</button>: 创建了一个按钮，当点击时会调用toggleMenu函数，用于切换导航链接的显示状态。
<div class="links">: 包含了三个<a>标签，每个标签代表一个导航链接。
<script>: 包含了JavaScript代码，用于处理导航栏的响应式行为。
- toggleMenu函数：切换.links类的display属性，用于显示或隐藏导航链接。
- window.onresize事件处理函数：当浏览器窗口大小改变时，根据窗口宽度决定是否显示导航链接。

这个网页的结构和样式都是响应式的，能够适应不同大小的屏幕。在屏幕宽度小于 600px时，导航链接会被隐藏，用户可以通过点击折叠按钮来显示或隐藏这些链接。

3.5 JavaScript 代码分析

3.5.1 `toggleMenu` 函数

function toggleMenu() {var links = document.querySelector('.links');if (links.style.display === 'block') {links.style.display = 'none';} else {links.style.display = 'block';}
}

document.querySelector('.links'): 使用querySelector方法选择类名为links的第一个元素。
if (links.style.display === 'block'): 检查links元素的display属性是否为'block'。
如果是'block'，则将其设置为'none'，隐藏导航链接。
如果不是'block'，则将其设置为'block'，显示导航链接。
这个函数被绑定到折叠按钮的onclick事件上，因此每次点击按钮时，都会切换导航链接的显示状态。

3.5.2 窗口大小改变事件处理

window.onresize = function() {if (window.innerWidth > 600) {document.querySelector('.links').style.display = 'block';} else {document.querySelector('.links').style.display = 'none';}
};

window.onresize: 这是一个事件处理器，当浏览器窗口大小改变时触发。
window.innerWidth: 获取浏览器窗口的内部宽度。
如果窗口宽度大于 600px，则显示导航链接（.links的display属性设置为'block'）。
如果窗口宽度小于或等于 600px，则隐藏导航链接（.links的display属性设置为'none'）。
这段代码确保了在窗口大小改变时，导航栏能够适应屏幕宽度，实现响应式设计。

4. 整体交互流程

当页面加载时，如果屏幕宽度大于 600px，导航链接默认显示。
如果屏幕宽度小于 600px，导航链接默认隐藏，只显示折叠按钮。
用户点击折叠按钮时，toggleMenu函数被调用，导航链接的显示状态在显示和隐藏之间切换。
当用户调整浏览器窗口大小时，onresize事件处理器会根据当前窗口宽度自动显示或隐藏导航链接。

5. 注意事项

CSS 中使用了float属性来布局导航链接，这在现代 Web设计中可能不是最佳实践，因为flexbox或grid布局更为灵活和强大。
在实际部署时，应确保折叠按钮的图标（☰）在不同设备和浏览器中能够正确显示。
考虑到可访问性，应该为折叠按钮添加aria-expanded属性，以指示按钮的状态，并可能为键盘用户添加键盘事件监听。

6. 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 基本样式 */
body {margin: 0;font-family: Arial, sans-serif;
}/* 导航栏样式 */
#navbar {background-color: #333;overflow: hidden;
}#navbar a {float: left;display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 折叠按钮样式 */
.toggle-button {float: right;display: none;color: lightgreen;text-align: center;padding: 14px 16px;text-decoration: none;font-size: 30px;cursor: pointer;
}/* 响应式布局 - 当屏幕宽度小于600px时，将导航链接堆叠到按钮上方 */
@media screen and (max-width: 600px) {#navbar a, .toggle-button {float: none;display: block;text-align: left;}.links {display: none;}
}
</style>
</head>
<body><nav id="navbar"><button class="toggle-button" onclick="toggleMenu()">☰</button><div class="links"><a href="#home">Home</a><a href="#about">About</a><a href="#contact">Contact</a></div>
</nav><script>
function toggleMenu() {var links = document.querySelector('.links');if (links.style.display === 'block') {links.style.display = 'none';} else {links.style.display = 'block';}
}// 当窗口大小改变时，如果屏幕宽度大于600px，则显示导航链接
window.onresize = function() {if (window.innerWidth > 600) {document.querySelector('.links').style.display = 'block';} else {document.querySelector('.links').style.display = 'none';}
};
</script></body>
</html>

Ext: FlexBox 布局实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 基本样式 */body {margin: 0;font-family: Arial, sans-serif;}/* 导航栏样式 */#navbar {display: flex;justify-content: space-between;align-items: center;background-color: #333;padding: 10px;}/* 导航链接样式 */.links {display: flex;list-style: none;}.links li {padding: 0 15px;}.links a {text-decoration: none;color: white;}/* 折叠按钮样式 */.toggle-button {display: none;cursor: pointer;color: white;}/* 响应式设计 */@media (max-width: 600px) {.links {display: none;flex-direction: column;width: 100%;}.links.active {display: flex;}.links li {text-align: center;padding: 10px 0;}.toggle-button {display: block;}}
</style>
</head>
<body><nav id="navbar"><div class="toggle-button" onclick="toggleMenu()">☰</div><ul class="links"><li><a href="#home">Home</a></li><li><a href="#about">About</a></li><li><a href="#services">Services</a></li><li><a href="#contact">Contact</a></li></ul>
</nav><script>function toggleMenu() {var links = document.querySelector('.links');links.classList.toggle('active');}window.onresize = function() {var links = document.querySelector('.links');if (window.innerWidth > 600) {links.classList.remove('active');} else {links.classList.add('active');}};
</script></body>
</html>

Ext: Grid 布局实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 基本样式 */body {margin: 0;font-family: Arial, sans-serif;}/* 导航栏样式 */#navbar {display: grid;grid-template-columns: auto 1fr auto;align-items: center;background-color: #333;padding: 10px;}/* 导航链接样式 */.links {display: flex;list-style: none;justify-content: space-around;}.links li {padding: 0 15px;}.links a {text-decoration: none;color: white;}/* 折叠按钮样式 */.toggle-button {display: none;cursor: pointer;color: white;}/* 响应式设计 */@media (max-width: 600px) {#navbar {grid-template-columns: 1fr;grid-template-rows: auto auto;}.links {display: none;flex-direction: column;width: 100%;grid-row: 2;}.links.active {display: flex;}.links li {text-align: center;padding: 10px 0;}.toggle-button {display: block;grid-row: 1;}}
</style>
</head>
<body><nav id="navbar"><div class="toggle-button" onclick="toggleMenu()">☰</div><ul class="links"><li><a href="#home">Home</a></li><li><a href="#about">About</a></li><li><a href="#services">Services</a></li><li><a href="#contact">Contact</a></li></ul>
</nav><script>function toggleMenu() {var links = document.querySelector('.links');links.classList.toggle('active');}window.onresize = function() {var links = document.querySelector('.links');if (window.innerWidth > 600) {links.classList.remove('active');} else {links.classList.add('active');}};
</script></body>
</html>

【HTML】JavaScript 实现自适应响应式导航栏

1. 简介

2. 实现效果

1. 当网页宽度大于 600px 时，导航栏状横向展开，态如下：

2. 当网页宽度小于 600px 时，导航栏横向收缩，状态如下：

3. 当网页宽度小于 600px 时，点击 ☰ 按钮，导航栏纵向展开：

3. 程序解析

3.1 文档类型声明

3.2 HTML根元素

3.3 文档头部

3.4 文档主体

3.5 JavaScript 代码分析

3.5.1 `toggleMenu` 函数

3.5.2 窗口大小改变事件处理

4. 整体交互流程

5. 注意事项

6. 完整代码

Ext: FlexBox 布局实现

Ext: Grid 布局实现

相关资讯

热文排行

最新新闻

推荐新闻

热搜词

【HTML】JavaScript 实现自适应响应式导航栏

1. 简介

2. 实现效果

1. 当网页宽度大于 600px 时，导航栏状横向展开，态如下：

2. 当网页宽度小于 600px 时，导航栏横向收缩，状态如下：

3. 当网页宽度小于 600px 时，点击 ☰ 按钮，导航栏纵向展开：

3. 程序解析

3.1 文档类型声明

3.2 HTML根元素

3.3 文档头部

3.4 文档主体

3.5 JavaScript 代码分析

3.5.1 toggleMenu 函数

3.5.2 窗口大小改变事件处理

4. 整体交互流程

5. 注意事项

6. 完整代码

Ext: FlexBox 布局实现

Ext: Grid 布局实现

相关资讯

热文排行

最新新闻

推荐新闻

热搜词

3.5.1 `toggleMenu` 函数