网站自适应导航代码
时间：2025-04-25 21:42:35
阅读：187人已围观
<!DOCTYPE html>
<html>
<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;
}
/* 导航栏容器 */
.navbar {
background: #333;
padding: 1rem;
position: relative;
}
/* 桌面导航链接 - 默认隐藏 */
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
font-size: 1.1rem;
}
/* 汉堡图标 */
.hamburger {
display: none; /* 默认隐藏 */
cursor: pointer;
position: absolute;
left: 20px; /* 改为左侧定位 */
right: auto; /* 清除原有右侧定位 */
top: 50%;
transform: translateY(-50%);
}
.hamburger .bar {
display: block;
width: 25px;
height: 3px;
margin: 5px 0;
background-color: #fff;
transition: all 0.3s ease;
}
/* 移动端样式 */
@media (max-width: 768px) {
.hamburger {
display: block; /* 移动端显示汉堡图标 */
}
.nav-links {
display: none; /* 默认隐藏菜单 */
width: 100%;
flex-direction: column;
background-color: #333;
position: absolute;
top: 100%;
left: 0;
padding: 1rem;
}
.nav-links.active {
display: flex; /* 激活时显示菜单 */
}
.nav-links li {
margin: 10px 0;
}
}
/* 汉堡图标动画 */
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
</style>
</head>
<body>
<nav>
<!-- 汉堡菜单图标 -->
<div onclick="toggleMenu()">
<div></div>
<div></div>
<div></div>
</div>
<!-- 导航链接 -->
<ul>
<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>
<script>
function toggleMenu() {
const navLinks = document.querySelector('.nav-links');
const hamburger = document.querySelector('.hamburger');
// 切换菜单显示
navLinks.classList.toggle('active');
// 切换汉堡图标动画
hamburger.classList.toggle('active');
// 点击菜单项后自动关闭菜单（可选）
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
hamburger.classList.remove('active');
});
});
}
</script>
</body>
</html>没有了！