使用要打开的按钮隐藏响应式导航
在创建响应式导航菜单时，您可能希望在用户点击导航链接后自动隐藏导航菜单。以下是一个使用 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');
});
});
});相关·内容
1回答
当页面变得太小，并且有一个按钮可以根据需要打开它时，我会尝试隐藏我的菜单。我正在努力让它成为现实。我可以在屏幕缩小时隐藏导航，并显示div按钮以重新打开它，但无法使菜单重新出现。我曾尝试使用焦点来调出原始的side nav div，但几乎没有成功，认为它不会覆盖代码以将其隐藏在屏幕尺寸上。我该如何解决这个问题呢？ 任何指导都非常感谢。
浏览 10提问于2019-12-28得票数 0
回答已采纳
1回答
我正在构建一个响应性的导航，刚刚遇到了一个问题。导航的本质是让它响应，所以你点击一个‘三行’按钮，菜单弹出页面。该菜单支持嵌套菜单，因此在菜单中，您也可以单击一个框(右边)打开嵌套菜单。现在，我的问题是，我只想打开导航点击，而不是悬停。实质上：
当在一定宽度下(媒体查询)隐藏它以显示要单击<
浏览 0提问于2013-03-24得票数 0
回答已采纳
对于B3，有大量带有下拉菜单的顶级导航栏的模板。随着屏幕尺寸变小，菜单折叠为3栏按钮，菜单变成折叠菜单。当屏幕变小时，我是否必须隐藏整个导航栏，并显示具有所有
浏览 1提问于2016-04-25得票数 1
我使用的是Liferay 6.2，并在我的html页面中包含了合金UI的Bootstrap版本，即：<script src="http://cdn.alloyui.com/2.5.0&#
浏览 2提问于2014-05-20得票数 1
在twitter导航栏的文档中，这样写道：
粘贴导航栏时，请记住要考虑下方的隐藏区域。向中添加40px或更多填充。请确保在核心Bootstrap CSS之后、可选的响应式CSS之前添加此内容。为什么会有隐藏的区域？这是因为twitter是这样做的，还是它应该是这样工作的？我对HTML/CSS/Bootstrap比较陌生
浏览 0提问于2012-06-09得票数 0
回答已采纳
13回答
我正在使用Bootstrap响应式导航栏。当导航栏折叠时，当我打开菜单并单击菜单项时，菜单不会自动关闭，我必须手动关闭。
是否可以在单击其中一个按钮后使菜单自动关闭？
浏览 14提问于2013-01-10得票数 40
回答已采纳
1回答
我在我的主干项目中使用bootstrap。我现在只使用‘经典的’响应式导航栏，当你缩小浏览器或用一部手机进入时，你会看到一个按钮，这会展开响应式导航栏，如果你有大屏幕，它会看到你的提示菜单。例如 (您可以在顶部菜单中看到文本，但如果您缩小浏览器屏幕，您会看到底部)
我有一个问题在打开/关闭时刻在移动/低分辨率/等。如果我按下打
浏览 0提问于2013-04-03得票数 0
1回答
执行segue self.performSegue(withIdentifier: "GoToClientScreen", sender: nil)时，单击导航栏中的后退按钮，然后在主屏幕导航栏中不隐藏setNavigationBarHidden(false, animated: true)见图像->并在这里按下按钮，我要导航栏
和导航栏不
浏览 2提问于2021-05-17得票数 0
回答已采纳
1回答
Bootstrap有一个令人惊叹的响应式布局系统，然而，有时它与视网膜屏幕的大小不太‘正确’。
例如，我的视网膜iPad有一个巨大的屏幕尺寸，但实际显示并不相同。在iPad上，我想隐藏左边的导航组件，并使用标题控件中的展开按钮来显示/隐藏，然而，我的iPad视网膜达到了大屏幕尺寸，因此没有隐藏。我使用
浏览 0提问于2013-11-26得票数 1
回答已采纳
3回答
我想让响应式导航栏类似于Bootstrap的导航栏，但它不能像我预期的那样工作。编辑:上一个问题已修复，但存在响应性问题。如果单击展开链接的按钮，然后再次单击以隐藏和调整大小，则不会显示屏幕链接。那么我该怎么做呢？
浏览 0提问于2015-08-25得票数 2
1回答
添加此代码时屏幕读取器不工作
、、、、
--Rest of the code--> </body>当显示覆盖时，我想隐藏成员-un元素。密码很好用。然而，当我使用NVDA屏幕阅读
浏览 4提问于2022-08-31得票数 0
我正在工作的网站没有使用桌面版的Bootstrap导航栏，而是利用了移动版的响应式导航栏(并隐藏了自定义导航)。导航栏没有实际的链接，甚至在桌面版本中也存在，显示品牌推广和搜索表单。然而，问题是该网站最终有三种导航类型：
1)自定义导航单元，桌面版使用。2)带有切换按钮的折叠导航</e
浏览 1提问于2013-06-09得票数 1
我正在尝试使用AlpineJS来关闭和打开我的标题导航的下拉列表。标头对大屏幕和移动屏幕有响应。我可以让标题下拉菜单在大屏幕上工作，但由于某种原因，它不能在移动屏幕上工作？我基本上使用了完全相同的语法，并尝试了许多其他语法。还是不走运。也许这是个bug？如果我说错了，有人能告诉我吗？
我使用的是TailwindCSS，大部分时间我把所有东西都留在那里，以复制我的问题。请注意，我的手
浏览 7提问于2021-05-28得票数 0
回答已采纳
2回答
我使用了下面的VBA和CommandBars对象来显示/隐藏导航和样式窗格： Application.CommandBars("Styles").Visible = True “样式”窗格的代码已停止工作导航窗格的相同代码将继续工作。 如何正确打开和关闭“样式”和“导航”窗格？也许我做错了。 我试着录制一个宏，但没有成功。我使用工具栏按钮(alt-ctrl-shift-S)来切换样式窗
浏览 33提问于2020-05-02得票数 1
回答已采纳
目前我正在为当地的一家公司做我的第一个网站，当我在移动设备上查看导航栏时，我遇到了一个问题。如果向右滚动时设备无法显示整个导航栏，则会显示一个空白区域。
浏览 1提问于2013-06-10得票数 0
回答已采纳
我正在尝试响应式网页设计。因此，导航菜单在小屏幕上会折叠成一个下拉菜单。用户可以触摸按钮来查看菜单。现在，只需按下按钮即可切换下拉可见性。我希望能够只按电话上的BACK键或触摸外面来隐藏它。任何关于如何实现这一点的提示都将是有帮助的。
浏览 1提问于2012-10-25得票数 0
1回答
我在一个响应式网站上工作，在那里我有一个包含类别的菜单。随着较小设备的视区缩小，类别框被隐藏，出现一个按钮，用户可以单击该按钮，并使用jquery切换类别导航。问题是，如果在切换导航后重新调整屏幕的大小，当您返回到较大的视口时，它不会正确地重新显示。我不确定如何解决这个问题，或者是否有更好的方法来解决它。感谢你的帮助谢谢
浏览 2提问于2012-08-09得票数 0
回答已采纳
我从select列表中选择值并将其传递给另一个报表中的Interactive查询。但是报告输出显示为空白。提前谢谢。
浏览 1提问于2017-05-23得票数 1
回答已采纳
我在这里做一个网站：
该网站使用响应导航插件，所以当视口足够窄时，导航被隐藏在菜单按钮后面。当按下菜单按钮时，导航就会出现。在Firefox和Chrome中，nav出现在内容的顶部，这是本例中所希望的效果。然而，在Safari和mobile中，打开导航会将内容向下推，这不是我想要的。我一直试图解决这个问题，通过应用的位置:绝对的
浏览 3提问于2014-09-05得票数 0
回答已采纳
我需要创建一个导航抽屉。我使用的是MMDrawerConroller和iOS 8。要创建导航抽屉，我使用的是
它工作得很好。但我正面临着一些问题。在左边的抽屉里，我把按钮和，以及标签都垂直和水平居中。我的按钮和标签在抽屉里没有居中。我认为这个库隐藏了视图控制器的某些部分，以提供导航抽屉效果，这就是为什么标签和按钮没有显示完整尺寸
浏览 6提问于2015-12-15得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
