单击时，汉堡菜单不会关闭
在前端开发中，汉堡菜单通常是一个用来隐藏导航栏链接的图标，用户点击图标后会展开一个侧边栏菜单。当用户单击汉堡菜单时，一般情况下是期望展开或关闭菜单。然而，有时候在某些特定情况下，单击汉堡菜单不会关闭菜单。
这种情况可能发生在以下场景中：
- 打开多个汉堡菜单：如果页面上有多个汉堡菜单，并且用户希望同时打开它们，那么单击汉堡菜单不会关闭已经打开的菜单是合理的做法。
- 打开子菜单：在某些设计中，汉堡菜单可以包含子菜单。当用户点击汉堡菜单展开子菜单时，希望汉堡菜单保持打开状态以方便用户选择子菜单项。
- 单击其他区域时关闭菜单：在某些情况下，用户可能希望单击页面其他区域时关闭汉堡菜单。这可以提供更好的用户体验，使用户能够方便地切换菜单状态。
为了实现汉堡菜单不关闭的效果，可以通过以下方式来处理：
- 使用JavaScript事件监听：在汉堡菜单的点击事件中，使用JavaScript代码来切换菜单的展开/关闭状态。通过添加适当的条件判断，可以实现不关闭菜单的效果。
- 控制CSS样式：通过修改菜单的CSS样式，使其在被点击后保持展开状态。可以使用CSS伪类或添加/移除CSS类来实现这个效果。
总结来说，汉堡菜单在单击时不关闭的情况下，可以通过合理的设计和代码控制来实现。在这种情况下，它可以允许用户同时打开多个菜单、展开子菜单或关闭菜单的其他区域。在实际开发过程中，需要根据具体的设计需求和用户体验考虑是否采用这种交互方式。
腾讯云相关产品介绍链接：
- 前端开发：腾讯云前端开发产品
- 后端开发：腾讯云云函数（Serverless）
- 软件测试：腾讯云移动测试服务
- 数据库：腾讯云数据库产品
- 服务器运维：腾讯云云服务器（CVM）
- 云原生：腾讯云云原生应用引擎
- 网络通信：腾讯云云联网
- 网络安全：腾讯云Web应用防火墙（WAF）
- 音视频：腾讯云音视频处理
- 多媒体处理：腾讯云媒体处理服务
- 人工智能：腾讯云人工智能产品
- 物联网：腾讯云物联网开发平台
- 移动开发：腾讯云移动应用开发平台
- 存储：腾讯云对象存储（COS）
- 区块链：腾讯云区块链服务
- 元宇宙：腾讯云云游戏
相关·内容
1回答
我正在尝试实现以下场景
当前，当用户单击汉堡包菜单时，用户将被导航到特定页面，但当用户在主页上单击菜单中的主页链接时，则汉堡包菜单将保持打开状态。我想关闭/隐藏/关闭菜单，即使用户在同一个页面上点击相同的链接。例如:如果用户在主页上并单击菜单中的主页链接，则菜单应关闭。我怎样才能做到这一点
onLinkClick(){
this.props.onItemClick(this.props.name, this.props.link);
}
onItemClick: () =>{
};
<SomeDiv onClick = {this.onLinkClick} link=
浏览 3提问于2017-10-23得票数 0
1回答
我有一个Navbar组件，在这里我创建了一个汉堡包菜单，当我点击汉堡包菜单时，我想要显示菜单组件，它是一个单独的组件。
我是通过道具来分享数据的。
但是，当您单击容器外部或单击链接时，我希望菜单消失。
单击外部容器可以使用npm包react-outside-click-handler，但是当我单击链接时，我的菜单不会关闭。
这就是我目前的情况
//肚脐
export default function Navbar() {
const [hamburgerOpen, setHamburgerOpen] = useState(false);
const toggleHamburger =
浏览 1提问于2021-12-21得票数 2
回答已采纳
1回答
我对如何在堆栈溢出上发布代码的步骤感到困惑。请查看完整代码的代码：
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
浏览 3提问于2022-04-08得票数 1
回答已采纳
1回答
当一个汉堡菜单被点击时，我正在尝试创建一个从右边滑入的菜单。我希望当用户单击X(单击时，汉堡菜单动画为X)或用户单击屏幕上的任何其他位置时，菜单将关闭。
<button class="hamburger hamburger--spin" type="button">
<span class="hamburger-box" onclick="openNav()">
<span class="hamburger-inner"></span>
<
浏览 7提问于2017-08-13得票数 1
回答已采纳
我已经使用react- burger -menu在我的Gatsby应用程序中创建了一个有效的汉堡菜单。我正在尝试获取它，以便当单击汉堡中的AnchorLink时，汉堡菜单将关闭。我试着按照文档中的建议执行<Menu isOpen={ false }>，但没有成功。有什么帮助吗？ 这是我的汉堡菜单代码： import React from "react"
import { slide as Menu } from "react-burger-menu"
import { AnchorLink } from "gatsby-plugin-anc
浏览 14提问于2020-07-28得票数 0
回答已采纳
我有一个使用引导的网站。
当窗口缩小为移动时，Navbar菜单将正确地折叠到通常的汉堡包(3条)按钮上。
我的问题是，当我单击此按钮打开菜单时，它就会打开，但会立即再次崩溃。
浏览 3提问于2016-03-20得票数 30
回答已采纳
我有一个网站，显示内容的基础上，在菜单列表中的项目。如果屏幕宽度太小，菜单就会被旋转和隐藏。此外，还会显示一个汉堡按钮。如果汉堡包按钮被激活(也是复选框)，菜单将被取消隐藏，内容被隐藏。
无论是内容还是菜单都不能访问汉堡包按钮后面的复选框，因为它们是汉堡按钮兄弟姐妹的孩子。
因此，如果选中了菜单项，则不会取消“汉堡”按钮，访问者需要再次单击“汉堡”按钮才能关闭菜单并查看内容。
不知何故，如果选择了不同的菜单项，或者单击了菜单项，我需要找到一个hack来取消“汉堡”按钮。
JavaScript还不是必需的，而且永远不会被使用。
我希望有人知道如何解决这个问题-我在这件事上毫无头绪.
浏览 5提问于2022-09-10得票数 -2
回答已采纳
我一直在做一些代码，在那里我使用汉堡响应菜单。当点击汉堡包图标时，菜单就会打开并关闭。我想添加一个功能，当单击菜单外时关闭菜单。我设法关闭菜单时，点击外面，但没有关闭动画。
下面是我尝试过的JS代码：
$(document).on("click", function () {
$(".navbar-collapse").removeClass("show");
});
以及HTML代码：
<nav class="navbar navbar-expand-lg tm-navbar" id="t
浏览 11提问于2022-04-18得票数 0
回答已采纳
在移动视图中，当您单击“关闭”图标时，会出现“汉堡包”菜单，用户单击它打开的图标。关门了。
我正在尝试允许用户单击菜单外部来关闭菜单。不幸的是，上面提供的JS代码允许用户单击站点上的任何位置，打开和关闭菜单。我不想这样，我只想当用户点击菜单外部的时候关闭菜单。
我怎样才能做到这一点？任何帮助都是非常感谢的。
document.querySelector('#bg-close').addEventListener('click', function() {
document.querySelector('.nav').classList.t
浏览 1提问于2021-08-29得票数 1
回答已采纳
在本例中：https://plnkr.co/edit/O9fbLcTV7QPvqB3FpiAA?p=preview 当您单击汉堡菜单图标并选择导航项目时，菜单将保持打开状态，直到您再次单击汉堡图标。当菜单项被选中时，有没有自动折叠的好方法？ 我试过了： <li><a href="#" ng-click="isNavCollapsed = !isNavCollapsed;">Link 1</a></li> 它可以工作，但在不处于移动模式时(在更宽的屏幕上)将触发导航菜单折叠动画。
浏览 15提问于2019-05-10得票数 0
1回答
我已经创建了一个汉堡包菜单，打开与面具在背景(面具打开后，4ms)。接下来，在关闭汉堡包菜单时，我希望面罩与它合上(意思是在4ms之后)。但相反，根据我的代码，我的面具没有关闭后，我的汉堡包菜单关闭。
联署材料：
const menuIcon = document.querySelector('.hamburger-menu');
const mainNav = document.querySelector('.main-nav');
menuIcon.addEventListener('click', () => {
menuI
浏览 1提问于2020-12-18得票数 1
回答已采纳
我正在一个开发网站上工作：
http://www.dinewine.com/startbootstrap-agency-1.0.6/index.html
当我尝试在除桌面之外的任何设备上使用汉堡包菜单时，便会打开汉堡包菜单，但是当单击图标时，下拉菜单将关闭，但子项不会显示。
我不知道从哪里开始。我检查了开发人员的网站，他们没有使用下拉菜单。
如有任何资料，将不胜感激。非常感谢。-Beth
我用子下拉的代码是：
<li class="dropdown">
<a href="#" dropdown-toggle data-toggle="
浏览 6提问于2016-07-11得票数 1
回答已采纳
1回答
我有一个汉堡包图标，动画到一个x，当点击回来，这反过来激活了一个幻灯片菜单。单击菜单中的链接时，菜单关闭，页面滚动到相关部分。然而，菜单图标则保持在"x“状态。当其中一个链接被点击时，我想切换"x“返回汉堡包状态。动画通过css控制。
<div id="hamburger" class="slideout-menu-toggle">
<div id="nav-icon3">
<span></span>
<span></span
浏览 2提问于2016-03-27得票数 0
我在Wordpress主题中使用Zurb Foundation 5，其中有一个离开画布菜单，它是在gerneral中工作的，但我遇到了一个问题：
除了顶部栏中的汉堡包图标外，我还提供了在单击固定位置div元素..back到-菜单时打开菜单的选项。为了实现这一点，我使用了该方法以编程方式打开docs菜单，如Zurb的docs中所描述的那样。虽然这很好，在我点击div.back-菜单打开菜单，然后再关闭菜单，我似乎不能打开菜单，点击在顶部酒吧的汉堡包图标。
这是打开菜单的代码：
jQuery('.back-to-menu').click(function(event) {
浏览 1提问于2014-09-21得票数 4
回答已采纳
2回答
当单击按钮时，我使用名为mmenu的jquery插件加载侧菜单。这很好，但我也试图在同一时间得到一个汉堡包风格的形象。我从这三行开始，然后当菜单按钮按下它变成一个十字，这似乎是可行的。
我的问题是当我试图关闭菜单时，我希望它回到一个十字架。mmenu允许您在任何地方单击以关闭菜单，但我无法获得jquery更改它的权限。当单击按钮(.menuvate)时，我添加了一个类，称为" active“，它显示交叉，但无论我如何尝试，我都无法让它在打开菜单后单击页面上的任何位置时检查该类是否处于活动状态。
到目前为止，这是我的代码
$('.menuvate').click(func
浏览 1提问于2015-02-10得票数 2
回答已采纳
2回答
我有汉堡包菜单，开得很好。当我再次点击汉堡包菜单图标时，我希望它关闭(这是不工作的，我挣扎)。(仅当我单击某个链接或单击菜单外部时，它才会关闭)。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></sc
浏览 1提问于2019-07-01得票数 2
回答已采纳
1回答
我有一个脚本，当它打开时，将汉堡包(菜单图标)更改为X，当它关闭时，将标准的三行更改为(标准的东西)。
X状态有一个称为".active“的导航开关类。
我已经将主体html定义为类.metro，所以当您在主屏幕上单击菜单打开时，它将关闭菜单，并删除类"active“(返回3行并关闭菜单).
……谁能告诉我为什么这段代码不起作用。
$(document).ready(function () {
var state = false;
$(".navbtn").click(function () {
if(!state){
浏览 4提问于2015-05-24得票数 1
回答已采纳
1回答
当屏幕宽度超过400px时，我需要隐藏汉堡菜单。
这是指向站点damf.co的链接
你会注意到，当屏幕宽度小于400px时，汉堡包就会出现，如果你点击它，然后让窗口展开，我无法让窗口隐藏，因为将内容推到一边，直到屏幕低于400px才能再次关闭它。
我对此还很陌生。任何帮助都将不胜感激。
浏览 3提问于2014-03-02得票数 0
1回答
如何在手机中隐藏菜单点击菜单项？
、、、、
我有一个只有一页的网站。我有一个带有平滑卷轴的菜单。当用户单击服务时，它将以平滑的滚动为目标服务部分。桌面上没有问题。
让我们谈谈移动
在移动中，菜单显示如下所示
当我点击汉堡包图标，它就会像这样显示
现在问题出现在平滑的卷轴上。当我点击服务，然后它是针对服务部分平滑滚动，但菜单仍然显示在手机上。
当我点击菜单时，我必须隐藏菜单。
你可以检查我的[code here][3]
浏览 0提问于2018-06-09得票数 0
回答已采纳
1回答
菜单切换不同的动画在每一秒点击？
、、、、
我创造了一把小提琴
当我单击汉堡包菜单时，面包屑向右切换，然后执行显示菜单的函数。
$menu_toggle.on('click', function(e){
e.preventDefault();
$(this).toggleClass('open');
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){
$navigat
浏览 4提问于2015-02-04得票数 0
回答已采纳
1回答
修复引导下拉菜单的行为
、、、、
请在以下位置查看菜单的html代码：
菜单出了点问题，我不知道该怎么修。当视区较小时，移动菜单(汉堡包菜单)和用户图标将根据需要显示在右上角。
但是，当移动/汉堡菜单紧跟在用户图标图像之后单击时，移动菜单不会关闭，并保持打开状态。这会导致糟糕的用户体验。当用户图标图像紧跟在移动菜单之后时，有没有办法关闭移动/汉堡菜单？
提前感谢您的宝贵时间。
丹
浏览 15提问于2017-08-17得票数 0
回答已采纳
我设法在我的页面(www.elevendozen.com)上获得了一个来自Codepen的汉堡包动画图标，虽然这个图标确实是动画的，但我不知道如何在它中包含侧面导航菜单内容。例如，当单击图标时，菜单不会滑出，反之亦然。
我目前正在使用可湿性粉剂移动菜单插件，但他们的图标不动画。你能帮我吗？谢谢！
<code>A0</code>
浏览 20提问于2019-03-27得票数 0
4回答
我正在使用这个名为transit.js的插件来创建一个简单的菜单动画，基本上我有以下菜单：
菜单打开和关闭的代码如下：
$('.main-header .nav-toggle-button').on('click' , function() {
// $('.main-header .navigation').toggleClass('show');
if ($('.main-header .navigation').hasClass('show')) {
$(
浏览 5提问于2016-04-17得票数 15
回答已采纳
1回答
我有带动画的汉堡包菜单。当我再次点击汉堡包菜单(在我已经逃离菜单后)，菜单显示没有动画。
我想这是由.animate引起的-我需要做.toggle
$(.ready)(函数(){$(“#openMenu”).click(函数(){ $("#main").toggle(200)；$(“#main”).toggle(200)；$(".menu").animate({ left："2%“})；})；
CSS：
.menu {高度:100 0px；宽度:0 0px；背景色：#450a5a；显示: flex；位置:绝对；左：-50%；光标:指针；指针-事
浏览 0提问于2019-05-17得票数 0
1回答
我有一个菜单div，它被设置为当我的汉堡菜单被点击时显示。我不确定如何应用CSS / JS，它也允许我在单击打开/关闭时停止滚动。
目前，用户可以向下滚动并丢失汉堡关闭按钮，因为他们可以自由滚动。关于如何做到这一点，以及如何应用代码来表示我的汉堡菜单，有什么想法吗?例如：
<a href="#" class="burger w-inline-block" data-ix="burger-click-2">
<div class="burger-line-1"></div>
<
浏览 21提问于2017-12-24得票数 0
我有一个问题，我想这很简单，但我不能自己解决它。我正在设计一个使用WordPress和Pistis模板的单页面网站。 问题是菜单被预定义为一个汉堡菜单，当它被点击时，整个页面变成灰色，一个大菜单出现在中心。我会上传一张照片，这样你就能更好地理解它。 ? 我想要发生的是，当你点击任何菜单元素(链接)时，整个菜单消失了，显示的网站就像以前任何人点击汉堡图标时显示的菜单一样。因为它是一个单页面，所以它不会在单击时加载不同的页面，它只是移动到页面的适当部分。如果我只能添加一些CSS，我怎么做？
浏览 26提问于2019-06-04得票数 0
回答已采纳
当以移动网站的形式查看网站时，有没有一种方法是，当您单击汉堡按钮时，nav菜单会覆盖整个屏幕。
目前，按下汉堡包按钮会暴露出大约50%的nav菜单
浏览 0提问于2016-11-16得票数 0
我有一个活动，其中包含一个片段，它显示了一个设置列表。单击列表项时，执行片段事务并显示详细片段。另外，汉堡包菜单项被转换为后箭头(home as up)。
在调试APK中，这是非常完美的。然而，在发行版中，汉堡包菜单没有转换为后箭头，而是保持不变。当单击详细片段中的“汉堡包”菜单按钮时，该片段将按预期的方式被删除。唯一的问题是后箭头的显示，它没有显示在发行版中使用Proguard。
浏览 1提问于2017-09-13得票数 1
回答已采纳
我喜欢在用户单击其图标时显示汉堡菜单中的菜单项，如果用户单击其他地方则再次隐藏菜单项。我的第一个(也是现在的)想法是这样的：
$('.brgIcon').on('click',function(){
$('.brgItem').slideToggle();
$('html').on('click',function(){
$('.brgItem').slideUp();
$('html').off('click');
浏览 11提问于2018-08-13得票数 0
单击汉堡包图标(左上角) 并选择显示在左边的汉堡包菜单可以向下滚动。
现在检查：单击相同的图标并尝试向下滚动汉堡包菜单，它不工作。
通过使用scrollBar: true初始化插件，我可以使所有东西都可以滚动，但我只希望菜单是可滚动的。有什么建议吗？
浏览 0提问于2014-11-25得票数 0
回答已采纳
3回答
我试着让我的汉堡菜单检测到，点击菜单外的时候(.NavMenu)，并将汉堡包复选框更改为未选中。
我尝试过使用event.stopPropagation();并尝试检测文档中的点击，但我的javascript知识确实有限，所以我要么根本无法显示.NavMenu，要么在外面单击.NavMenu关闭，但汉堡包菜单仍然保持打开状态(X)。
有人能帮我如何使菜单关闭时，点击外的div，也将触发复选框？
浏览 5提问于2017-08-31得票数 0
回答已采纳
1回答
我有一个肚脐，使用HeadlessUI的Popover在手机上的汉堡包菜单。默认情况下，当您单击不在其中的元素/焦点时，此菜单将关闭。
现在，我正在尝试添加一个模式(HeadlessUI，Dialog)，在单击弹出菜单中的一个按钮时，我希望打开该模式。该模型在ModalButton组件定义(<><button><dialog></>)中使用。这是为了分离关注点(与模型相关的所有内容都在ModalButton中)。
问题是:当我在导航栏的弹出菜单并点击按钮打开对话框。浏览器关注这个新对话框，因此弹出窗口失去焦点，使其关闭。由于关闭，按钮(因此对话框
浏览 12提问于2021-12-30得票数 3
回答已采纳
2回答
我有一个“移动”菜单，在桌面版本上也可以看到：
点击“汉堡包”菜单触发整个包装div的不透明度。您可以在链接中看到效果。我想添加的只是另一个触发器，当菜单打开时，它将关闭菜单，不仅是再次单击汉堡包菜单，而且整个左边的菜单都是屏幕上的。
就像这样：
这是我在单击时触发的代码的一部分：
jQuery("#page-cover").css("opacity",0.6).fadeIn(300);
这会使它消退：
jQuery("#page-cover").css("opacity",0.6).fadeOut(300);
谢谢
谢谢
浏览 2提问于2015-05-18得票数 0
回答已采纳
2回答
把李亚特里放在一个跨度上
、、、
我是一个初学者，在美好的世界的发展，我需要你的帮助。让我解释一下：
我有一个菜单，当按下汉堡时，它会显示三项。一方面，当您单击某个项目时，菜单会关闭，而另一方面，我会将该项目剪切为显示在SPAN中:)
$('li').click(function() { alert($(this).attr('id'));})
谢谢你的帮助。
使节
浏览 0提问于2016-08-01得票数 0
回答已采纳
当我点击一个按钮时，我想要触发几个同时的动作。
在jQuery中，我使用toggleClass()来显示和隐藏汉堡。在单击上展开菜单，效果很好。我不能做的是同时触发另一个事件。例如，隐藏页面中的项。
我想要达到的行为如下：当我点击汉堡包时，菜单会展开并隐藏所讨论的项目。新的点击汉堡打开菜单并再次显示隐藏的项目。
我尝试了很多东西，但都没有成功。
帮个忙？
浏览 3提问于2022-02-23得票数 -2
3回答
我正在创建一个汉堡包菜单，我使用JavaScript处理菜单的开关。下面是我的代码的样子：
const hamburger_menu = document.querySelector('.hamburger-menu');
const side_nav = document.querySelector('.side-nav');
hamburger_menu.addEventListener('click', () => {
side_nav.classList.toggle('open');
})
当单击汉堡包菜
浏览 18提问于2021-12-18得票数 0
回答已采纳
1回答
我正在尝试在我的一个盲人网站上实现键盘可访问性。我的网站上有一份汉堡包菜单。当使用键盘上的"Tab“键导航时，焦点移动到此汉堡菜单项。当点击"Enter“时，它将展开，当再次按下"Tab”键时，它在打开的汉堡菜单元素中导航。一旦到达最后一项，它将专注于内容。
在这种情况下，一旦用户使用键盘的"Tab“键将焦点移出，是否可以关闭汉堡菜单？
这里是示例。是否可以在焦点输出后关闭侧边菜单？
浏览 6提问于2021-05-27得票数 0
1回答
我一直在使用MasterPageDetail方法为我的Xamarin表单应用程序创建一个汉堡包菜单。菜单本身可以很好地工作，就像从Xamarin文档中获取的一样。我注意到，如果我在一个视图中创建一个指向页面的简单链接，那么汉堡包菜单和它的图标就会被一个后退按钮所取代。
我想知道的是，如何在内容页面中创建一个链接来显示我的汉堡包菜单，而不是显示一个后退按钮。从MasterPage中单击的任何链接都会将您带到腐蚀视图，但您仍然可以看到汉堡包菜单，如果您单击其中一个页面中的某个链接，那么您就会被带到页面上，但是使用后退按钮代替。这给我的用户带来了一种令人困惑的导航体验。
下面的代码演示了如何在刚才的
浏览 3提问于2017-05-18得票数 0
回答已采纳
1回答
桌面屏幕不错，但移动屏幕面临两个问题：
JSFiddle演示：
当我在移动屏幕上时，汉堡包菜单出现在中间，而不是右边，还有搜索按钮。应该是这样的：
当我单击“汉堡”菜单时，Search按钮消失并显示在可折叠菜单中。我希望它保持在下面的位置：
我做错了什么？请帮帮忙。我已经挣扎了好几天了！
浏览 4提问于2022-11-02得票数 0
回答已采纳
1回答
如果汉堡包菜单被点击覆盖，我如何关闭外面的汉堡包菜单呢？我仍然是js的新手，下面是我的代码。现在它只是在关闭汉堡包图标时起作用。我在练习，但我似乎不能让它工作。
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
fun
浏览 0提问于2018-04-13得票数 0
当你点击菜单链接时，有没有办法关闭移动汉堡菜单？我们有一个菜单链接，可以启动一个模式窗口，但当我关闭模式窗口时，菜单仍然显示在它后面。
浏览 0提问于2020-02-28得票数 1
我知道有很多关于JS和检查元素是否有特定类的类似问题。我仍然有一个我不能解决的问题。我有一个导航汉堡，当点击(使用CSS和JS)时，它会转换为X，并打开一个下拉菜单。汉堡和下拉菜单仅在特定媒体查询中可见。因此，如果您通过单击汉堡包打开菜单，调整窗口大小使汉堡包和菜单消失，重新调整它的大小(汉堡包再次出现，但菜单不会显示，因为它会自动关闭)，汉堡包仍然显示为X，因为它不会更新。我注意到下拉菜单(我没有编写)有一个类分配给它，这取决于它是否打开。汉堡包动画也是如此。如果它有"is-active“类，则显示为X；如果没有，则显示为汉堡包。
现在，我想将汉堡与下拉菜单同步。因此，如果菜单分配了
浏览 15提问于2020-05-06得票数 1
回答已采纳
在materialize CSS中，默认情况下汉堡菜单在左侧。我更改了CSS并在单击时将其变为right.But，侧边导航仍然从左侧滑出。我参考了文档，但没有找到正确切换菜单的类。我尝试过edge: right，但它不起作用。
我想让菜单从点击汉堡包图标的右边滑出来。提前谢谢你
浏览 1提问于2015-09-14得票数 1
如何在单击burger菜单时显示全页宽度下拉列表，同时仍然保留close函数(X)。(单击时下拉菜单和关闭汉堡菜单转换)
下面是汉堡菜单动画的JS函数。单击时使用悬停和关闭进行过渡。
$("#wrapper").hover(function() {
$(".menu").toggleClass("transition");
});
$("#wrapper").click(function() {
$(".transition").toggleClass("close");
});
浏览 0提问于2018-03-07得票数 0
5回答
我想要点击一个汉堡包菜单图标，然后有列表显示在我的图标之下。我用这种风格设置了汉堡菜单图标。
.menu-btn div {
position: absolute;
left: 100%;
top: 64%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
浏览 1提问于2018-02-06得票数 5
回答已采纳
1回答
我使用的是，我的导航条在崩溃时不会隐藏导航项，而是显示汉堡包菜单和旁边的导航项。然而，当单击汉堡包菜单时，它会按应有的方式显示项目列表。是否有一种方法可以在单击菜单之前隐藏项目？
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { BrowserRouter, Routes, Route, Link } fr
浏览 1提问于2022-11-06得票数 0
1回答
TheHamburgerCollection.com
我的汉堡包菜单在所有其他页面上都是正确的--我只是不希望它显示在主页上，在主页上可以看到768 at及以下。
footer.php是菜单所在的位置：
<div class="mobile-nav">
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span&
浏览 0提问于2016-11-23得票数 1
我使用的是汉堡包菜单图标，它可以在点击时进行转换。
动画是通过.toggleClass制作的。
$(document).ready(function() {
$('#nav-hamburger-big').click(function() {
$(this).toggleClass('open');
});
});
示例：
此图标触发基本引导菜单。然而，我注意到，当您单击动画时，如果页面仍然在加载，或者当您再次快速单击它时，动画会挂起。它仍然会触发菜单弹出打开，但是转换会跳过，这会导致一个相反的图标(当菜单关闭时是X，菜单打开时是汉堡包)。
在完
浏览 3提问于2015-06-11得票数 3
回答已采纳
1回答
我用CSS制作了一个汉堡包菜单。我想做两件事：
当用户单击它时，创建边框(浅色)，如下图所示。
当用户单击/悬停在汉堡包上时，倒置颜色，即将我的汉堡包边框更改为黑色，背景更改为白色和内部div，以遵循相同的模式。为此，我添加了一个css :hover，但不知道如何使子元素跟随父元素。
.hamburger:hover {
background-color: whitesmoke;
}
代码：
浏览 2提问于2020-09-06得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
