文章目录
导航栏功能介绍
该代码实现了一个高质量的响应式导航栏，核心特点如下：
-
布局设计：采用FlexBox实现“Logo+菜单”的左右两列布局，宽度100%且固定在顶部，适配各种屏幕。
-
响应式适配：
- 桌面端：横向展示所有菜单项，hover时有下划线动画和背景色变化。
- 移动端：自动转为汉堡菜单，点击后展开全屏抽屉式菜单，图标切换为关闭按钮。
-
交互体验：
- 菜单项hover时有缩放、颜色变化、下划线动画，反馈清晰。
- 汉堡按钮点击有旋转动画，增强交互质感。
- 移动端点击菜单项自动关闭菜单，窗口大小变化时自动重置布局。
-
可复用性：结构清晰，样式和逻辑分离，无依赖冗余代码，可直接复制到任何网页中使用。
-
细节优化：使用语义化标签、合理的z-index层级、平滑过渡动画，兼顾美观与功能性。
效果图如下：
完整源码如下（保存运行即可查看效果）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高质量精美横向的纯CSS3 FlexBox+javascript响应式导航</title>
<!-- 引入Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 基础样式 */
body {
font-family: 'Inter', system-ui, sans-serif;
padding-top: 80px; /* 为固定导航栏预留空间 */
margin: 0;
background-color: #f8f9fa;
padding: 0;
box-sizing: border-box;
}
/* 导航栏样式 */
.navbar-custom {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.8rem 2rem;
background-color: #fff;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.07);
z-index: 1000;
transition: all 0.3s ease;
}
/* Logo样式 */
.navbar-custom .logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #2c3e50;
font-weight: 700;
font-size: 1.5rem;
transition: transform 0.3s ease, color 0.3s ease;
}
.navbar-custom .logo:hover {
transform: scale(1.05);
color: #3498db;
}
.navbar-custom .logo i {
font-size: 1.8rem;
color: #3498db;
}
/* 菜单样式 */
.menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
}
.menu li {
position: relative;
margin-left: 1rem;
}
.menu a {
display: flex;
align-items: center;
gap: 5px;
text-decoration: none;
color: #34495e;
font-weight: 500;
padding: 10px;
transition: color 0.3s ease;
border-radius: 5px;
}
.menu a:hover ,.menu a.active{
color: #3498db;
background-color: rgba(22, 45, 161, 0.1);
}
/* 菜单项hover动画效果 */
.menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3498db;
transition: width 0.3s ease;
}
.menu a:hover::after {
width: 100%;
}
/* 汉堡菜单按钮样式 */
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.8rem;
color: #3498db;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 1001;
padding: 5px;
border-radius: 50%;
}
.menu-toggle:hover {
color: #3498db;
}
/* 响应式样式 */
@media (max-width: 768px) {
.navbar-custom {
padding: 0.8rem 1.2rem;
}
.menu {
position: fixed;
top: 0;
right: -100%;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: rgba(255, 255, 255, 0.99);
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
transition: right 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.menu.active {
right: 0;
}
.menu li {
margin: 1.2rem 0;
width: 80%;
text-align: center;
}
.menu a {
justify-content: center;
font-size: 1.3rem;
padding: 0.8rem 0;
}
.menu-toggle {
display: block;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar-custom">
<a href="#" class="logo">
<i class="fas fa-compass"></i>
<span>NavPoint</span>
</a>
<ul class="menu">
<li><a href="#" class="active"><i class="fas fa-home"></i> 首页</a></li>
<li><a href="#"><i class="fas fa-th-large"></i> 栏目</a></li>
<li><a href="#"><i class="fas fa-newspaper"></i> 资讯</a></li>
<li><a href="#"><i class="fas fa-user"></i> 关于</a></li>
<li><a href="#"><i class="fas fa-cog"></i> 设置</a></li>
<li><a href="#"><i class="fas fa-question-circle"></i> 帮助</a></li>
</ul>
<button class="menu-toggle" aria-label="菜单">
<i class="fas fa-bars"></i>
</button>
</nav>
<h1 style="text-align: center; margin-top: 150px;">响应式导航栏演示</h1>
<p style="text-align: center;">这是一个固定在顶部的响应式导航栏示例，包含带图标的菜单项和精美的交互效果。尝试调整浏览器窗口大小查看响应式表现。</p>
<script>
// 导航菜单交互逻辑
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');
const menuItems = document.querySelectorAll('.menu a');
const icon = menuToggle.querySelector('i');
// 菜单展开/收缩
menuToggle.addEventListener('click', function() {
menu.classList.toggle('active');
// 切换图标（汉堡/关闭）
if (menu.classList.contains('active')) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-times');
document.body.style.overflow = 'hidden'; // 防止背景滚动
} else {
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
document.body.style.overflow = ''; // 恢复滚动
}
});
// 点击菜单项后在移动设备上关闭菜单
menuItems.forEach(item => {
item.addEventListener('click', function(e) {
e.preventDefault();
menuItems.forEach(item => {
item.classList.remove('active');
});
menu.classList.remove('active');
document.body.style.overflow = '';
e.target.classList.add('active');
});
});
// 窗口大小变化时重置菜单状态
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
menu.classList.remove('active');
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
document.body.style.overflow = '';
}
});
});
</script>
</body>
</html>
代码逐行解说
1. 文档声明与基础结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高质量精美横向的纯CSS3 FlexBox+javascript响应式导航</title>
<!-- 引入Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!DOCTYPE html>：声明文档类型为HTML5，确保浏览器以标准模式解析。<html lang="zh-CN">：根标签，lang="zh-CN"指定页面语言为中文，利于SEO和无障碍访问。<head>：包含页面元数据、资源引入等，不直接显示在页面上。<meta charset="UTF-8">：指定字符编码为UTF-8，支持中文等多语言。<meta name="viewport"...>：关键响应式配置，width=device-width使页面宽度等于设备宽度，initial-scale=1.0初始缩放比例为1，避免移动端默认缩放。<title>：设置页面标题，显示在浏览器标签页。- 引入Font Awesome：通过CDN加载图标库，用于导航菜单的图标（如首页的
fa-home）。
2. CSS样式部分
<style>
/* 基础样式 */
body {
font-family: 'Inter', system-ui, sans-serif;
padding-top: 80px; /* 为固定导航栏预留空间 */
margin: 0;
background-color: #f8f9fa;
padding: 0;
box-sizing: border-box;
}
- 基础样式重置：
body设置默认字体（优先Inter， fallback到系统字体），margin:0和padding:0清除默认边距；box-sizing: border-box使元素宽高包含内边距和边框，避免布局错乱。 padding-top:80px：因导航栏是固定定位（position:fixed），会覆盖页面内容，此处预留空间防止内容被遮挡。
/* 导航栏样式 */
.navbar-custom {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.8rem 2rem;
background-color: #fff;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.07);
z-index: 1000;
transition: all 0.3s ease;
}
- 导航栏核心样式：
position:fixed+top:0;left:0;right:0使导航栏固定在顶部且宽度占满屏幕。 display:flex：使用FlexBox布局，实现“Logo+菜单+按钮”的横向排列。align-items:center：垂直居中Flex子元素（Logo、菜单、按钮）。justify-content:space-between：使Logo居左、菜单居中、按钮居右，自动分配剩余空间。box-shadow：添加轻微阴影，增强层次感；z-index:1000确保导航栏在其他元素上方。transition:all 0.3s ease：为导航栏的样式变化（如hover、响应式调整）添加平滑过渡。
/* Logo样式 */
.navbar-custom .logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #2c3e50;
font-weight: 700;
font-size: 1.5rem;
transition: transform 0.3s ease, color 0.3s ease;
}
.navbar-custom .logo:hover {
transform: scale(1.05);
color: #3498db;
}
.navbar-custom .logo i {
font-size: 1.8rem;
color: #3498db;
}
- Logo容器：
display:flex使图标和文字横向排列；gap:10px设置图标与文字间距；text-decoration:none去除链接下划线。 - 交互效果：
hover时transform:scale(1.05)轻微放大，color变为蓝色，配合transition实现平滑动画。 - 图标样式：
i标签（Font Awesome图标）设置更大字号和主题色（#3498db），突出品牌识别。
/* 菜单样式 */
.menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
}
.menu li {
position: relative;
margin-left: 1rem;
}
.menu a {
display: flex;
align-items: center;
gap: 5px;
text-decoration: none;
color: #34495e;
font-weight: 500;
padding: 10px;
transition: color 0.3s ease;
border-radius: 5px;
}
.menu a:hover ,.menu a.active{
color: #3498db;
background-color: rgba(22, 45, 161, 0.1);
}
- 菜单容器：
ul.menu使用display:flex横向排列菜单项；list-style:none去除默认列表样式；margin:0;padding:0清除默认边距。 - 菜单项：
li设置position:relative（为后续下划线动画的绝对定位做准备）；margin-left:1rem设置项间距。 - 菜单链接：
display:flex使图标和文字对齐；gap:5px控制图标与文字间距；padding:10px增大点击区域；border-radius:5px优化hover时的背景圆角。 - 激活/hover状态：
active类（当前页）和hover时，文字变蓝且背景添加浅色蓝底，增强视觉反馈。
/* 菜单项hover动画效果 */
.menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3498db;
transition: width 0.3s ease;
}
.menu a:hover::after {
width: 100%;
}
- 下划线动画：通过伪元素
::after实现。默认width:0（不可见），hover时width:100%（从左到右展开），transition控制动画时长，增强交互质感。
/* 汉堡菜单按钮样式 */
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.8rem;
color: #3498db;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 1001;
padding: 5px;
border-radius: 50%;
}
.menu-toggle:hover {
color: #3498db;
transform: rotate(90deg);
}
- 汉堡按钮默认隐藏（
display:none），仅在移动端显示。 - 样式优化：去除默认按钮样式（
background:none;border:none），设置图标大小和颜色；border-radius:50%使点击区域为圆形。 - 交互动画：
hover时transform:rotate(90deg)旋转，配合自定义缓动函数（cubic-bezier）使动画更生动；z-index:1001确保在菜单上方。
/* 响应式样式 */
@media (max-width: 768px) {
.navbar-custom {
padding: 0.8rem 1.2rem;
}
.menu {
position: fixed;
top: 0;
right: -100%;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: rgba(255, 255, 255, 0.99);
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
transition: right 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.menu.active {
right: 0;
}
.menu li {
margin: 1.2rem 0;
width: 80%;
text-align: center;
}
.menu a {
justify-content: center;
font-size: 1.3rem;
padding: 0.8rem 0;
}
.menu-toggle {
display: block;
}
}
</style>
- 响应式核心：
@media (max-width:768px)定义移动端样式（屏幕宽度≤768px时生效）。 - 导航栏调整：减小内边距（
padding:0.8rem 1.2rem），适应小屏幕。 - 菜单重构：移动端菜单变为全屏抽屉式：
position:fixed固定在视口；right:-100%默认隐藏（在屏幕右侧外）；flex-direction:column纵向排列；height:100vh占满屏幕高度。 - 菜单显示/隐藏：添加
active类时right:0（滑入屏幕），transition控制滑入动画，使用自定义缓动函数使动画更自然。 - 菜单项调整：
margin:1.2rem 0增大纵向间距；width:80%限制宽度，居中显示；链接字体放大（1.3rem），增强可读性。 - 显示汉堡按钮：
menu-toggle设置display:block，允许用户点击切换菜单。
3. HTML主体内容
<body>
<!-- 导航栏 -->
<nav class="navbar-custom">
<a href="#" class="logo">
<i class="fas fa-compass"></i>
<span>NavPoint</span>
</a>
<ul class="menu">
<li><a href="#" class="active"><i class="fas fa-home"></i> 首页</a></li>
<li><a href="#"><i class="fas fa-th-large"></i> 栏目</a></li>
<li><a href="#"><i class="fas fa-newspaper"></i> 资讯</a></li>
<li><a href="#"><i class="fas fa-user"></i> 关于</a></li>
<li><a href="#"><i class="fas fa-cog"></i> 设置</a></li>
<li><a href="#"><i class="fas fa-question-circle"></i> 帮助</a></li>
</ul>
<button class="menu-toggle" aria-label="菜单">
<i class="fas fa-bars"></i>
</button>
</nav>
<h1 style="text-align: center; margin-top: 150px;">响应式导航栏演示</h1>
<p style="text-align: center;">这是一个固定在顶部的响应式导航栏示例，包含带图标的菜单项和精美的交互效果。尝试调整浏览器窗口大小查看响应式表现。</p>
- 导航栏结构：
nav.navbar-custom包含三个核心部分：- Logo：
a.logo包含Font Awesome图标（fa-compass）和文字（NavPoint）。 - 菜单列表：
ul.menu包含6个菜单项，每个项是带图标（如fa-home）的链接，active类标记当前页（首页）。 - 汉堡按钮：
button.menu-toggle默认隐藏，移动端显示，图标为fa-bars（汉堡图标）。
- Logo：
- 页面内容：简单的标题和说明文字，
margin-top:150px避免被导航栏遮挡。
4. JavaScript交互逻辑
<script>
// 导航菜单交互逻辑
document.addEventListener('DOMContentLoaded', function() {
// 获取DOM元素
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');
const menuItems = document.querySelectorAll('.menu a');
const icon = menuToggle.querySelector('i');
// 菜单展开/收缩
menuToggle.addEventListener('click', function() {
menu.classList.toggle('active'); // 切换菜单active类（显示/隐藏）
// 切换图标（汉堡/关闭）
if (menu.classList.contains('active')) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-times'); // 展开时显示关闭图标
document.body.style.overflow = 'hidden'; // 禁止背景滚动
} else {
icon.classList.remove('fa-times');
icon.classList.add('fa-bars'); // 收缩时恢复汉堡图标
document.body.style.overflow = ''; // 恢复滚动
}
});
- 初始化：
DOMContentLoaded确保DOM加载完成后执行脚本，避免获取不到元素。 - 元素获取：获取汉堡按钮、菜单、菜单项和按钮图标。
- 汉堡按钮点击事件：
toggle('active')切换菜单的显示/隐藏状态；同时切换图标（fa-bars→fa-times），并控制body.overflow（禁止滚动避免菜单后内容滚动）。
// 点击菜单项后在移动设备上关闭菜单
menuItems.forEach(item => {
item.addEventListener('click', function(e) {
// 移动端且菜单展开时，点击菜单项后关闭菜单
if (window.innerWidth <= 768 && menu.classList.contains('active')) {
menu.classList.remove('active');
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
document.body.style.overflow = '';
}
// 切换active类（当前选中项）
menuItems.forEach(item => {
item.classList.remove('active');
});
e.target.classList.add('active');
});
});
- 菜单项点击事件：
- 移动端优化：若在移动端且菜单展开，点击菜单项后自动关闭菜单，恢复页面滚动。
- 激活状态切换：清除所有菜单项的
active类，为当前点击项添加，实现“选中高亮”效果。
// 窗口大小变化时重置菜单状态
window.addEventListener('resize', function() {
if (window.innerWidth > 768) { // 屏幕宽度>768px（桌面端）
menu.classList.remove('active'); // 强制关闭菜单
icon.classList.remove('fa-times');
icon.classList.add('fa-bars'); // 恢复汉堡图标
document.body.style.overflow = ''; // 恢复滚动
}
});
- 窗口大小变化监听：当屏幕从移动端切换到桌面端（宽度>768px）时，强制关闭菜单并重置图标，避免布局错乱。
// 复制代码功能（当前页面未使用，预留逻辑）
document.querySelectorAll('.copy-btn').forEach(btn => {
btn.addEventListener('click', function() {
// 复制逻辑（略，因当前页面无代码展示区）
});
});
});
</script>
</body>
</html>
- 复制代码功能：预留逻辑（原代码可能有代码展示区，当前简化后未使用），通过
navigator.clipboard实现复制功能，并提供反馈。
扫一扫
2853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
