使用要打开的按钮隐藏响应式导航
在创建响应式导航菜单时，您可能希望在用户点击导航链接后自动隐藏导航菜单。以下是一个使用 HTML、CSS 和 JavaScript 的示例，展示如何实现这一点。
1. HTML 结构
首先，创建一个基本的 HTML 结构，包括导航菜单和按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<button class="navbar-toggle" id="navbar-toggle">☰</button>
<ul class="navbar-menu" id="navbar-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>2. CSS 样式
接下来，添加一些基本的 CSS 样式来创建响应式导航菜单。
/* styles.css */
body {
font-family: Arial, sans-serif;
}
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar-toggle {
background-color: #333;
border: none;
color: white;
padding: 14px 20px;
font-size: 18px;
cursor: pointer;
display: none; /* 默认隐藏 */
}
.navbar-menu {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.navbar-menu li {
flex: 1;
}
.navbar-menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar-menu li a:hover {
background-color: #575757;
}
/* 响应式样式 */
@media (max-width: 768px) {
.navbar-toggle {
display: block; /* 小屏幕时显示按钮 */
}
.navbar-menu {
display: none; /* 小屏幕时隐藏菜单 */
flex-direction: column;
}
.navbar-menu.show {
display: flex; /* 显示菜单 */
}
}3. JavaScript 功能
最后，添加 JavaScript 以实现点击按钮显示/隐藏导航菜单，并在点击导航链接后自动隐藏菜单。
// script.js
document.addEventListener('DOMContentLoaded', function () {
const navbarToggle = document.getElementById('navbar-toggle');
const navbarMenu = document.getElementById('navbar-menu');
// 点击按钮显示/隐藏导航菜单
navbarToggle.addEventListener('click', function () {
navbarMenu.classList.toggle('show');
});
// 点击导航链接后隐藏导航菜单
const navbarLinks = navbarMenu.querySelectorAll('a');
navbarLinks.forEach(function (link) {
link.addEventListener('click', function () {
navbarMenu.classList.remove('show');
});
});
});相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
