简单自适应汉堡导航模板 (HTML + CSS + JS)免费下载使用
以下是一个完整的简单自适应汉堡导航菜单模板，包含所有HTML + CSS + JS代码片段。当屏幕尺寸小于特定宽度时，会显示汉堡菜单图标，点击后可展开/收起导航菜单，你可以免费下载使用，可以节省你在相关行业开发过程中的时间。
简单自适应汉堡导航模板 (HTML + CSS + JS)完整版免费下载，模板相关代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应汉堡导航</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
}
header {
background-color: #333;
color: #fff;
padding: 1rem;
position: relative;
}
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
}
.nav-links a {
color: #fff;
text-decoration: none;
transition: color 0.3s;
}
.nav-links a:hover {
color: #f0f0f0;
}
.hamburger {
display: none;
cursor: pointer;
width: 24px;
height: 24px;
position: relative;
background: transparent;
border: none;
outline: none;
}
.hamburger span {
display: block;
width: 100%;
height: 2px;
background-color: #fff;
position: absolute;
left: 0;
transition: transform 0.3s, opacity 0.3s;
}
.hamburger span:nth-child(1) {
top: 6px;
}
.hamburger span:nth-child(2) {
top: 12px;
}
.hamburger span:nth-child(3) {
top: 18px;
}
.hamburger.active span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
@media (max-width: 768px) {
.hamburger {
display: block;
}
.nav-links {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #333;
flex-direction: column;
align-items: center;
padding: 1rem 0;
clip-path: circle(0px at 90% -10%);
transition: clip-path 0.5s ease-in-out;
pointer-events: none;
}
.nav-links.active {
clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.nav-links li {
margin: 1rem 0;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="logo">网站LOGO</div>
<nav>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-links">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</div>
</header>
<script>
document.addEventListener('DOMContentLoaded', function() {
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', function() {
this.classList.toggle('active');
navLinks.classList.toggle('active');
});
// 点击导航链接后关闭菜单（移动端）
const navItems = document.querySelectorAll('.nav-links a');
navItems.forEach(item => {
item.addEventListener('click', function() {
if (window.innerWidth <= 768) {
hamburger.classList.remove('active');
navLinks.classList.remove('active');
}
});
});
// 窗口大小改变时检查是否需要隐藏菜单
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
hamburger.classList.remove('active');
navLinks.classList.remove('active');
}
});
});
</script>
</body>
</html>功能说明
- 响应式设计：
- 在宽度大于768px时显示常规导航菜单
- 在宽度小于等于768px时显示汉堡菜单图标
- 动画效果：
- 汉堡图标点击时有动画效果（三条线变为X）
- 导航菜单展开/收起时有平滑的动画效果
- 交互功能：
- 点击汉堡图标切换菜单显示状态
- 点击菜单项后自动关闭菜单（移动端）
- 窗口大小改变时自动调整菜单状态
自定义选项
- 修改断点：在CSS中修改
@media (max-width: 768px)的值来调整切换汉堡菜单的屏幕宽度 - 修改颜色：修改
background-color和color属性来改变导航栏和菜单的颜色 - 修改动画：调整
transition属性值来改变动画速度和效果 - 添加更多菜单项：只需在
<ul class="nav-links">中添加更多<li>元素
这个模板简洁、现代，适合大多数网站使用，可以根据需要进行进一步的自定义。