帮我写一个好看的H5 html手机自适应导航菜单栏模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机自适应导航菜单栏模板</title>
<style>
/* 导航栏样式 */
nav {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
nav h1 {
margin: 0;
font-size: 24px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: none; /* 默认隐藏 */
}
nav ul li {
padding: 10px;
text-align: center;
background-color: #444;
cursor: pointer;
}
nav ul li:hover {
background-color: #555;
}
/* 显示菜单栏 */
@media screen and (min-width: 768px) {
nav ul {
display: flex;
}
nav ul li {
margin-left: 10px;
background-color: #333;
cursor: default;
}
nav ul li:hover {
background-color: #333;
}
}
/* 汉堡菜单样式 */
.hamburger {
display: block;
position: relative;
height: 20px;
width: 25px;
cursor: pointer;
}
.hamburger span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background-color: #fff;
transition: transform 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 0;
}
.hamburger span:nth-child(2) {
top: 9px;
}
.hamburger span:nth-child(3) {
bottom: 0;
}
/* 旋转汉堡菜单 */
.hamburger.active span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
transform: scale(0);
}
.hamburger.active span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* 显示菜单栏 */
@media screen and (min-width: 768px) {
.hamburger {
display: none;
}
}
</style>
</head>
<body>
<nav>
<h1>网站名称</h1>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>首页</li>
<li>分类</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</nav>
<script>
// 获取元素
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('nav ul');
// 点击汉堡菜单显示/隐藏菜单栏
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
menu.classList.toggle('active');
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/M9L 著作权归作者所有。请勿转载和采集!