一键关闭汉堡菜单
基础概念
汉堡菜单（Hamburger Menu）是一种常见的用户界面元素，通常用于移动设备或响应式网页设计中。它通常由三条水平线组成，点击后会展开一个菜单，显示网站的主要导航选项。
相关优势
- 节省空间：汉堡菜单在屏幕空间有限的情况下非常有用，因为它可以隐藏复杂的导航选项。
- 简洁美观：设计简洁，不会干扰主要内容。
- 易于实现：在大多数前端框架中都可以轻松实现。
类型
- 静态汉堡菜单：点击后展开菜单，再次点击收起。
- 动态汉堡菜单：可以包含动画效果，提升用户体验。
- 响应式汉堡菜单：根据屏幕大小自动调整显示方式。
应用场景
- 移动设备网页
- 响应式网站
- 应用程序界面
问题：一键关闭汉堡菜单
原因
用户可能希望在某些情况下快速关闭汉堡菜单，例如：
- 用户已经完成导航操作，希望返回主界面。
- 用户误触打开了菜单，希望立即关闭。
解决方案
可以通过编程实现一键关闭汉堡菜单的功能。以下是一个简单的示例代码，使用HTML和JavaScript来实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>汉堡菜单示例</title>
<style>
.menu-icon {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 30px;
}
.menu-icon span {
display: block;
width: 100%;
height: 3px;
background-color: black;
border-radius: 10px;
}
.menu {
display: none;
position: absolute;
top: 50px;
left: 0;
width: 100%;
background-color: white;
border: 1px solid #ccc;
}
.menu.active {
display: block;
}
</style>
</head>
<body>
<div class="menu-icon" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu" id="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<script>
function toggleMenu() {
const menu = document.getElementById('menu');
menu.classList.toggle('active');
}
// 一键关闭汉堡菜单
document.addEventListener('click', function(event) {
const menu = document.getElementById('menu');
if (!menu.contains(event.target) && menu.classList.contains('active')) {
menu.classList.remove('active');
}
});
</script>
</body>
</html>解释
- HTML结构：
menu-icon：汉堡菜单图标。menu：导航菜单，初始状态下是隐藏的。
- CSS样式：
menu-icon：定义汉堡菜单图标的样式。menu：定义导航菜单的样式，初始状态下是隐藏的。
- JavaScript功能：
toggleMenu函数：点击汉堡菜单图标时，切换菜单的显示状态。- 事件监听器：当点击页面其他区域时，如果菜单是展开的，则关闭菜单。
参考链接
通过这种方式，用户可以一键关闭汉堡菜单，提升用户体验。
相关·内容
1回答
我已经创建了一个汉堡包菜单，打开与面具在背景(面具打开后，4ms)。接下来，在关闭汉堡包菜单时，我希望面罩与它合上(意思是在4ms之后)。但相反，根据我的代码，我的面具没有关闭后，我的汉堡包菜单关闭。
联署材料：
const menuIcon = document.querySelector('.hamburger-menu');
const mainNav = document.querySelector('.main-nav');
menuIcon.addEventListener('click', () => {
menuI
浏览 1提问于2020-12-18得票数 1
回答已采纳
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回答
我正在尝试实现以下场景
当前，当用户单击汉堡包菜单时，用户将被导航到特定页面，但当用户在主页上单击菜单中的主页链接时，则汉堡包菜单将保持打开状态。我想关闭/隐藏/关闭菜单，即使用户在同一个页面上点击相同的链接。例如:如果用户在主页上并单击菜单中的主页链接，则菜单应关闭。我怎样才能做到这一点
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回答
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
我已经使用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
回答已采纳
我有一个网站，显示内容的基础上，在菜单列表中的项目。如果屏幕宽度太小，菜单就会被旋转和隐藏。此外，还会显示一个汉堡按钮。如果汉堡包按钮被激活(也是复选框)，菜单将被取消隐藏，内容被隐藏。
无论是内容还是菜单都不能访问汉堡包按钮后面的复选框，因为它们是汉堡按钮兄弟姐妹的孩子。
因此，如果选中了菜单项，则不会取消“汉堡”按钮，访问者需要再次单击“汉堡”按钮才能关闭菜单并查看内容。
不知何故，如果选择了不同的菜单项，或者单击了菜单项，我需要找到一个hack来取消“汉堡”按钮。
JavaScript还不是必需的，而且永远不会被使用。
我希望有人知道如何解决这个问题-我在这件事上毫无头绪.
浏览 5提问于2022-09-10得票数 -2
回答已采纳
我刚开始编程，但我需要帮助。
我用wordpress模板建立了我的网站。我自己做了很多定制，但我很难在移动设备上创建汉堡菜单。
我不知道我怎么能重写选择的模板导航条菜单到汉堡。如果有人能帮我的话请告诉我。
浏览 1提问于2016-11-21得票数 0
回答已采纳
3回答
我的汉堡包菜单在所有其他页面上都是正确的--我只是不希望它显示在主页上，在主页上，它目前在768 at及以下可见。
footer.php是菜单所在的位置：
<div class="mobile-nav">
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span>
浏览 5提问于2016-11-23得票数 0
回答已采纳
1回答
如果汉堡包菜单被点击覆盖，我如何关闭外面的汉堡包菜单呢？我仍然是js的新手，下面是我的代码。现在它只是在关闭汉堡包图标时起作用。我在练习，但我似乎不能让它工作。
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
fun
浏览 0提问于2018-04-13得票数 0
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
2回答
我设计了一个网站，使用CSS汉堡包菜单来激活一个幻灯条与网站上不同的网页链接。
我还写了一个iPhone/andriod应用程序，需要有一个汉堡菜单，打开一个滑块工作，运行swift和android代码。
我想添加到iphone/android汉堡幻灯条链接到网站(有自己的汉堡包菜单)
我如何测试网站，如果它是移动设备或PC，所以我可以关闭如果“网站”汉堡包，如果它是移动，因为我已经有并需要在移动汉堡包菜单。
我在网站上有php，所以我可以删除网站上的汉堡包菜单，如果它是一个手机。
这是主页
<html>
<div class="w3-sidebar w3-bar
浏览 0提问于2017-08-27得票数 0
1回答
我正在尝试在我的一个盲人网站上实现键盘可访问性。我的网站上有一份汉堡包菜单。当使用键盘上的"Tab“键导航时，焦点移动到此汉堡菜单项。当点击"Enter“时，它将展开，当再次按下"Tab”键时，它在打开的汉堡菜单元素中导航。一旦到达最后一项，它将专注于内容。
在这种情况下，一旦用户使用键盘的"Tab“键将焦点移出，是否可以关闭汉堡菜单？
这里是示例。是否可以在焦点输出后关闭侧边菜单？
浏览 6提问于2021-05-27得票数 0
当你点击菜单链接时，有没有办法关闭移动汉堡菜单？我们有一个菜单链接，可以启动一个模式窗口，但当我关闭模式窗口时，菜单仍然显示在它后面。
浏览 0提问于2020-02-28得票数 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
回答已采纳
1回答
我已经试着解开这个谜团一周了。 我正尝试在我的Nuxt/Vue网站上用Vuetify设置一个侧边栏，人们点击汉堡菜单，侧边栏就会打开。为此，我将汉堡菜单设置为运行切换方法。 <v-app-bar-nav-icon @click="toggleSidebar"></v-app-bar-nav-icon>
......
<script>
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations({
to
浏览 13提问于2019-09-14得票数 0
回答已采纳
我一直在做一些代码，在那里我使用汉堡响应菜单。当点击汉堡包图标时，菜单就会打开并关闭。我想添加一个功能，当单击菜单外时关闭菜单。我设法关闭菜单时，点击外面，但没有关闭动画。
下面是我尝试过的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
回答已采纳
我在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回答
我使用肚脐固定顶部，我想我的菜单项显示在肚脐以下的完全宽度，当点击汉堡图标。
菜单应该一直走到屏幕的底部。当菜单打开时，汉堡图标应该变成X图标。
不管访问者使用的是什么设备，这种行为都应该发生。
这是我的，这是一个模型：
正如您所看到的，我已经实现了全宽度菜单项，但我不确定如何执行以下操作：
达到期望的高度
使汉堡包图标在切换时变为X。
有什么想法吗？
浏览 6提问于2017-10-25得票数 0
回答已采纳
1回答
我正在用Ionic开发一个应用程序，它的主要视图是地图(使用传单)。在侧菜单中，有一些形式允许在地图上进行不同的搜索(两点之间的最短路径.)。
问题是，每次我点击一个输入(文本，复选框.)在表单中，边菜单关闭。
有什么可以避免的吗？这是可能的，侧菜单只关闭和显示时，我点击‘汉堡’按钮？
浏览 2提问于2015-03-25得票数 2
回答已采纳
当打开侧栏菜单面板( id为".ui-panel-opened") #nav)时，我试图在汉堡包菜单图像和交叉图像之间切换图标(这将获得".ui-panel-closed").类并关闭该类)。当侧边栏菜单面板关闭时，图标(具有“..header menu -图标”类)将是汉堡包(icon-menu.svg)，并在侧边栏菜单面板打开时切换到交叉图标(icon-close.svg)by更改源。下面是我的代码，但是没有成功实现的尝试。非常感谢您的意见和建议。
$( document ).ready(function() {
if($('#na
浏览 3提问于2015-11-11得票数 0
回答已采纳
1回答
当屏幕宽度超过400px时，我需要隐藏汉堡菜单。
这是指向站点damf.co的链接
你会注意到，当屏幕宽度小于400px时，汉堡包就会出现，如果你点击它，然后让窗口展开，我无法让窗口隐藏，因为将内容推到一边，直到屏幕低于400px才能再次关闭它。
我对此还很陌生。任何帮助都将不胜感激。
浏览 3提问于2014-03-02得票数 0
1回答
我有一个脚本，当它打开时，将汉堡包(菜单图标)更改为X，当它关闭时，将标准的三行更改为(标准的东西)。
X状态有一个称为".active“的导航开关类。
我已经将主体html定义为类.metro，所以当您在主屏幕上单击菜单打开时，它将关闭菜单，并删除类"active“(返回3行并关闭菜单).
……谁能告诉我为什么这段代码不起作用。
$(document).ready(function () {
var state = false;
$(".navbtn").click(function () {
if(!state){
浏览 4提问于2015-05-24得票数 1
回答已采纳
我试着做一个只支持css的汉堡菜单。
问题是我的检查函数不能像预期的那样工作，并且我找不出我弄错了什么。
汉堡菜单的起步价是1000px。
我使用带有复选框的输入在打开和关闭之间切换。
#toggle:checked + .menu { display: block;}
.menu a {
font-size: 22px;
}
#toggle {
display: none;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
#toggle {
display: block;
}
#tog
浏览 3提问于2018-07-17得票数 0
我知道如何创建android汉堡包菜单，有很多教程可用。
我想在每个类中创建汉堡包菜单，在公共类中调用一个方法，这些方法都有汉堡包菜单代码。还有我的汉堡包菜单，在listview里面有选项。
如何创建这样的汉堡包菜单。我想减少我的代码，并为其他人提供可重用的代码。请帮帮我。
浏览 5提问于2016-03-03得票数 0
1回答
我在我的网站(www.pnxau.me)上遇到了一个问题，第一次使用‘汉堡菜单’时，它会关闭，然后打开，然后就会正常工作。
我能得到一些帮助来解决这个bug吗？
提前谢谢。
浏览 3提问于2016-06-12得票数 0
我有一个网站使用奇妙的插件，它做的非常，非常好。
然而，在移动设备上，我遇到了一个问题，当菜单高度超过ViewPort时，滑动汉堡包菜单不带触摸屏滚动，如下图所示：
问题
如何强制侧菜单接受基于触摸的滚动？
浏览 0提问于2019-03-25得票数 1
回答已采纳
1回答
使用CSS动画
、、、
我有一个菜单，显示在当前页面顶部，一旦按下汉堡包图标，使用魅力的CSS。
该菜单动画从右边的屏幕和完美的工作，但我正在努力使它动画一旦在任何地方的菜单是按下。
动画是编写的(animateOut)，但是我需要帮助在动画的输入和输出之间按一下键切换代码：
汉堡包菜单点击->菜单幻灯片从右边。
单击菜单容器中的任何位置，->菜单滑到右边。
HamburgerMenu.js
CSS
const cssHamburgerMenuIcon = css({
position: 'absolute',
height: 20,
width:
浏览 0提问于2018-03-07得票数 13
回答已采纳
当用户点击汉堡包菜单时，我想保持背景箭头按钮关闭侧菜单，我必须显示箭头才能关闭侧菜单。
这是写在离子菜单中，如下所示。
<div class="avatarcontent">
<img class="avatarimg" src="https://i1.wp.com/christopherscottedwards.com/wp-content/uploads/2017/08/Generic-Profile.jpg?fit=550%2C400">
<ion-icon name="arrow-ba
浏览 0提问于2018-04-10得票数 0
回答已采纳
1回答
我激活了Gedit Bookmark插件。
下拉“汉堡包”菜单有以下选项：
拨动书签
去往下一个书签
后藤前书签
这些，特别是“下一个书签”选项有键盘快捷键吗？
浏览 0提问于2021-01-10得票数 3
回答已采纳
我正在一个开发网站上工作：
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
回答已采纳
我有一个汉堡菜单按钮，可以通过TAB选择。当我点击它，菜单打开时，汉堡有一个蓝色的轮廓，清楚地表明它被聚焦了。我不想删除蓝色轮廓，因为它有助于视力受损的人和标签选择它也很棒，但有没有一个聪明的方法来删除蓝色轮廓时，只有当有人点击它通过鼠标。只是无神论。
谢谢你的回答。
干杯
浏览 4提问于2017-03-06得票数 11
我有一个汉堡包菜单，从网站上滑进来。每次我选择一个单元格时，它都会删除菜单。我想添加一个TapRecognizer，这样当你点击外部的时候，它也会将它删除。
var isPresenting = true
let dimmingView = UIView()
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 1.0
}
敲击外面应该会忽略菜单。
浏览 1提问于2019-06-05得票数 0
回答已采纳
我知道有很多关于JS和检查元素是否有特定类的类似问题。我仍然有一个我不能解决的问题。我有一个导航汉堡，当点击(使用CSS和JS)时，它会转换为X，并打开一个下拉菜单。汉堡和下拉菜单仅在特定媒体查询中可见。因此，如果您通过单击汉堡包打开菜单，调整窗口大小使汉堡包和菜单消失，重新调整它的大小(汉堡包再次出现，但菜单不会显示，因为它会自动关闭)，汉堡包仍然显示为X，因为它不会更新。我注意到下拉菜单(我没有编写)有一个类分配给它，这取决于它是否打开。汉堡包动画也是如此。如果它有"is-active“类，则显示为X；如果没有，则显示为汉堡包。
现在，我想将汉堡与下拉菜单同步。因此，如果菜单分配了
浏览 15提问于2020-05-06得票数 1
回答已采纳
大家好，我正在导航到一个主详细信息页面，代码如下：
await Navigation.PushAsync(new MasterPage_Jobseeker());
但它显示的是后退按钮，而不是汉堡菜单。
我现在该怎么做？
谢谢!
浏览 10提问于2018-01-27得票数 0
抽屉菜单干扰了我的浏览页面的滑动手势。我查看了之前的文章，并将drawerLayout设置为mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);，但这只在尝试滑动打开菜单时才起作用，如果菜单是打开的，它仍然允许滑动手势关闭菜单。
有没有办法彻底禁用整个视图的滑动手势？这样一来，用户打开菜单的唯一方式是点击汉堡菜单图标，或者关闭菜单的唯一方式是点击菜单内的"X“按钮，同时在抽屉菜单打开时滑动也不会影响浏览页面。
浏览 114提问于2021-02-19得票数 0
我有一个使用引导的网站。
当窗口缩小为移动时，Navbar菜单将正确地折叠到通常的汉堡包(3条)按钮上。
我的问题是，当我单击此按钮打开菜单时，它就会打开，但会立即再次崩溃。
浏览 3提问于2016-03-20得票数 30
回答已采纳
1回答
我有一个恼人的问题，试图定位响应导航汉堡包。我正在使用一个名为响应菜单的插件，它创建了汉堡包，并使用绝对定位。
我一直试着把汉堡放在头球的中心位置。为了实现这一点，我使用了以下jQuery代码。
不过，我遇到的问题是，当汉堡包被显示时，你会向下滚动页面，然后快速回滚到页面的顶部。汉堡包没有将自己定位在头部的中心位置。你需要稍微向下滚动，这样它才能跳到正确的位置。
请告诉我怎么解决这个问题。它快把我逼疯了，我对jquery不太了解：
(谢谢各位事先提出的意见:)
$( window ).on("load resize scroll", function(e){
var he
浏览 3提问于2016-06-22得票数 0
回答已采纳
1回答
如何在手机中隐藏菜单点击菜单项？
、、、、
我有一个只有一页的网站。我有一个带有平滑卷轴的菜单。当用户单击服务时，它将以平滑的滚动为目标服务部分。桌面上没有问题。
让我们谈谈移动
在移动中，菜单显示如下所示
当我点击汉堡包图标，它就会像这样显示
现在问题出现在平滑的卷轴上。当我点击服务，然后它是针对服务部分平滑滚动，但菜单仍然显示在手机上。
当我点击菜单时，我必须隐藏菜单。
你可以检查我的[code here][3]
浏览 0提问于2018-06-09得票数 0
回答已采纳
2回答
我正在尝试做一个响应网站菜单，这是可操作的汉堡(3行)。
我有菜单要打开，但它不断上下移动汉堡，以便给它让路。
我怎么做它，所以你点击汉堡，它停留在同一个地方，而打开菜单和播放它的动画？
<div class="burger" id="burger" onclick="openBurger(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class=
浏览 0提问于2018-10-18得票数 0
回答已采纳
我设法在我的页面(www.elevendozen.com)上获得了一个来自Codepen的汉堡包动画图标，虽然这个图标确实是动画的，但我不知道如何在它中包含侧面导航菜单内容。例如，当单击图标时，菜单不会滑出，反之亦然。
我目前正在使用可湿性粉剂移动菜单插件，但他们的图标不动画。你能帮我吗？谢谢！
<code>A0</code>
浏览 20提问于2019-03-27得票数 0
1回答
我是CSS的新手，我会去维克多弗莱尔的漂亮的CSS汉堡菜单：
我的主页内容将替换以下示例文本：
#1 Burger Menu
inspired by
Google Material Design
如何在网站的所有页面上显示和访问3栏菜单？
我的意思是，如果用户点击汉堡菜单，点击“关于”链接，页面就会加载，但到目前为止，汉堡菜单不再出现在左上角？
我应该做什么修改，以使汉堡菜单始终可以从任何页面访问？
非常感谢，
浏览 19提问于2017-02-13得票数 0
我有一个带有汉堡包菜单的Xamarin Forms Shell应用程序。当我打开应用程序时，我看不到iPhone上的汉堡包菜单(但在我的安卓系统上)。当我在某个地方导航并返回时，汉堡包图标就会像预期的那样出现。为了处理汉堡包菜单，我依赖于应用程序shell模板的默认生成代码，并且只是向菜单中添加了一些更多的项目。
如何让shell始终显示我的菜单图标？
指向项目的Github链接：
浏览 3提问于2020-08-20得票数 1
回答已采纳
假设我的汉堡边栏菜单只包含两个链接:一个链接到我的主页，一个链接到我的联系人页面。
我的主页已经从网站名称链接起来了。
我的联系人页面已从position:sticky联系人us框中链接。
据说没有汉堡边栏菜单我会做得很好。
如果我删除汉堡边栏菜单，这是一个SEO问题吗？也就是说，搜索引擎更喜欢那些没有汉堡边栏菜单(“导航菜单”)的网站吗？
浏览 0提问于2021-09-23得票数 4
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
我正在尝试使用符号的unicode在Winforms C#的按钮控件中显示汉堡菜单的符号/图标。我试着在谷歌上搜索，但所有的结果都指向了UWP，CSS，Xamarin等的汉堡菜单unicodes。而不是C# Winforms。 我之所以需要在C# Winforms中实现汉堡菜单unicode，是因为通过代码或属性选项卡可以轻松/简单地更改符号的ForeColor，而不必在每次需要不同的符号或图标颜色时上载新图像。 有没有在C# Winforms中实现的汉堡包菜单符号的unicode，或者每当我需要一个不同颜色的汉堡包菜单图标时，我都必须上传一个新的图像？ 谢谢你。
浏览 25提问于2019-10-18得票数 1
回答已采纳
我的博客是基于博客SOHO主题的 (带有自定义域)。
在移动或iPad等较小的屏幕上，汉堡包菜单出现在标题的左上角。在大型桌面/笔记本电脑屏幕上，汉堡菜单消失，相反，打开的侧边栏出现在屏幕的左侧(而不是汉堡菜单)。
我希望汉堡菜单总是显示在大型桌面/笔记本电脑屏幕上。我不希望侧边栏显示，而是希望边栏项目显示时，汉堡菜单被点击。
如果有人能告诉我如何通过CSS或修改HTML来实现这一点，我将不胜感激。谢谢。
浏览 5提问于2020-09-29得票数 1
回答已采纳
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
回答已采纳
我有一个问题，我想这很简单，但我不能自己解决它。我正在设计一个使用WordPress和Pistis模板的单页面网站。 问题是菜单被预定义为一个汉堡菜单，当它被点击时，整个页面变成灰色，一个大菜单出现在中心。我会上传一张照片，这样你就能更好地理解它。 ? 我想要发生的是，当你点击任何菜单元素(链接)时，整个菜单消失了，显示的网站就像以前任何人点击汉堡图标时显示的菜单一样。因为它是一个单页面，所以它不会在单击时加载不同的页面，它只是移动到页面的适当部分。如果我只能添加一些CSS，我怎么做？
浏览 26提问于2019-06-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
