汉堡包导航三层结构,(帮我写下代码,html+css实现的,移动端和pc端自适应)
时间: 2024-09-06 08:05:52 浏览: 26
汉堡包导航,也称为三明治菜单或折叠菜单,在网页设计中是一种常见的响应式布局,特别是在移动设备上。这里是一个简单的HTML和CSS实现的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
}
/* 主要导航 */
.navbar {
display: flex;
justify-content: space-between;
padding: 1rem;
background-color: #f0e68c;
position: sticky; /* 使导航栏固定在顶部 */
top: 0;
z-index: 999;
}
.nav-item {
margin-left: 1rem;
}
/* 鼠标悬停效果 */
.nav-item:hover {
color: #333;
}
/* 展开菜单按钮 */
.hamburger-btn {
display: none; /* 初始隐藏 */
cursor: pointer;
width: 40px;
height: 30px;
background-color: transparent;
border: none;
outline: none;
padding: 0;
}
/* 移动端显示 */
@media (max-width: 768px) {
.navbar ul {
display: none; /* 初始隐藏 */
}
.hamburger-btn {
display: block;
float: right;
}
.is-active {
display: block;
}
}
/* 展示菜单 */
.is-active ul {
display: flex;
list-style-type: none;
padding: 0;
}
/* 二级菜单项 */
.sub-menu-item {
display: flex;
align-items: center;
padding: 0.5rem;
}
.sub-menu-item a {
color: #333;
text-decoration: none;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<a href="#" class="nav-item">首页</a>
<a href="#" class="nav-item">关于我们</a>
<div class="hamburger-btn">☰</div>
<ul class="hidden">
<li class="sub-menu-item"><a href="#">产品一</a></li>
<li class="sub-menu-item"><a href="#">产品二</a></li>
<li class="sub-menu-item"><a href="#">更多</a></li>
</ul>
</nav>
<script>
// 简单的触屏事件模拟展开菜单
window.addEventListener('touchstart', function(e) {
if (!e.target.matches('.hamburger-btn')) return;
document.querySelector('.navbar ul').classList.toggle('is-active');
});
</script>
</body>
</html>
```
这个例子中,当屏幕宽度小于768px时,会显示汉堡包图标(`<div class="hamburger-btn">`),点击后会切换出下拉菜单。这是一个基础版本,实际应用中可能需要添加更复杂的动画效果以及交互处理。