# 移动设备上的左侧汉堡菜单 **URL:** https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513 **Category:** Theme component **Tags:** mobile **Created:** [2020年九月18日 22:56 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513 "2020-09-18T22:56:47Z") **Posts on this page:** 20 **Page:** 1
### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast) #### Post date: [2020年九月18日 22:56 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/1 "2020-09-18T22:56:47Z")
有一件事我们一直未能完成，在我们完成 [全高滑出式汉堡菜单](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789) 的工作后造成了一些困惑，那就是右侧的汉堡菜单会从_左侧_打开。对于那些有兴趣重新排列标题栏的用户，这是为您准备的： ![Screenshot from 2020-09-18 12-19-27](https://global.discourse-cdn.com/meta/original/3X/b/3/b309bdc6153b29f88f9ffee0a4cb3b3be700bdd9.png) 移动菜单出现在屏幕左上角，单手操作不太方便，因此这是一个独立的主题组件。选项，您懂的？ | | | | | --- | --- | --- | | 🛠 | **仓库** | [discourse-left-menu](https://github.com/featheredtoast/discourse-left-menu-theme-component) | | ❓ | **安装指南** | [如何安装主题或主题组件](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) | | 📖 | **Discourse 主题新手？** | [Discourse 主题使用入门指南](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) | ---
### Author: ![Paracelsus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paracelsus/32/164912_2.png) [@Paracelsus](https://meta.discourse.org/u/Paracelsus) #### Post date: [2020年九月19日 12:40 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/2 "2020-09-19T12:40:51Z")
非常棒。是否可能扩展该组件，并在菜单图标位于左侧时将 logo 置于横条中间？我认为从用户体验（UX）角度来看，这是最合乎逻辑的方式。 ---
### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast) #### Post date: [2020年九月21日 16:57 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/3 "2020-09-21T16:57:06Z")
好的，我已经为您添加了一个主题选项，可以让 Logo 更加居中——请享用！🙂 ![Screenshot from 2020-09-21 09-57-37](https://global.discourse-cdn.com/meta/original/3X/a/4/a4698a058d1e5021a999e41603b1b8dbc64cc1bc.png) ![Screenshot from 2020-09-21 09-56-45](https://global.discourse-cdn.com/meta/original/3X/3/c/3c77c4e63b6dce007839e811b3498f1b05fcf4ea.png) ---
### Author: ![Karthikk\_Vijay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/karthikk_vijay/32/199586_2.png) [@Karthikk\_Vijay](https://meta.discourse.org/u/Karthikk_Vijay) #### Post date: [2021年一月3日 08:13 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/4 "2021-01-03T08:13:46Z")
是否也可以为桌面版进行自定义？ ---
### Author: ![ozkn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ozkn/32/196013_2.png) [@ozkn](https://meta.discourse.org/u/ozkn) #### Post date: [2021年一月3日 10:57 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/5 "2021-01-03T10:57:03Z")
感谢主题组件 @featheredtoast ---
### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast) #### Post date: [2021年一月5日 18:50 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/6 "2021-01-05T18:50:02Z")
对于此特定主题组件，我认为桌面端不在范围内。 当然，如果您希望在桌面端实现类似效果，完全可以做到。如果您有具体的设计构想，在独立的主题中采用与我这里相同的桌面端技术，实施起来并不会太困难。 ---
### Author: ![Karthikk\_Vijay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/karthikk_vijay/32/199586_2.png) [@Karthikk\_Vijay](https://meta.discourse.org/u/Karthikk_Vijay) #### Post date: [2021年一月7日 11:43 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/7 "2021-01-07T11:43:23Z")
感谢您的回复 🙂 我目前还缺乏自己构建的技能，但也许应该开始自学这些了 😉 ---
### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead) #### Post date: [2023年四月8日 01:19 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/8 "2023-04-08T01:19:59Z")
它只能在平板电脑上启用吗？因为这种用户体验非常适合平板电脑，但不太适合手机（很多人单手使用智能手机）。 ---
### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc) #### Post date: [2024年二月16日 09:07 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/10 "2024-02-16T09:07:13Z")
最近这个组件有个 bug，激活它之后所有东西都错位了，我该怎么修复？ ![image](https://global.discourse-cdn.com/meta/original/4X/8/5/f/85f43720675d37fa10e21ff0c092730e43713bdf.png) ---
### Author: ![fokx](https://avatars.discourse-cdn.com/v4/letter/f/958977/32.png) [@fokx](https://meta.discourse.org/u/fokx) #### Post date: [2024年三月4日 03:35 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/12 "2024-03-04T03:35:14Z")
这不起作用。由于汉堡包按钮已经在桌面版的左上角，我们能否在核心代码中也将其设在移动版 UI 的左上角？如果不行，是什么原因阻碍了这种设计统一？ ---
### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger) #### Post date: [2024年三月4日 06:21 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/13 "2024-03-04T06:21:28Z")
由于我们收到了一些关于此主题组件当前无法正常工作的报告，我已添加 #broken 标签。👍 ---
### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly) #### Post date: [2024年三月4日 06:55 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/14 "2024-03-04T06:55:02Z")
> [@fokx](#): > > 设计统一的障碍是什么？ 如OP所述： > [@featheredtoast](#): > > 移动菜单出现在屏幕的左上角，单手不易触及，因此这是一个独立的组件 菜单在移动设备上位于同一侧，方便单手使用。 ---
### Author: ![fokx](https://avatars.discourse-cdn.com/v4/letter/f/958977/32.png) [@fokx](https://meta.discourse.org/u/fokx) #### Post date: [2024年三月4日 08:12 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/15 "2024-03-04T08:12:26Z")
感谢您指出我肯定会忽略的阅读内容。我明白了。但我们可以使其可配置吗？ 这个想法是，一些使用相对较小尺寸手机的用户（例如 Pixel 7）可能没有可访问性问题，而从左侧弹出的菜单非常不自然。如果至少有什么东西必须出现在某个角落，为什么不能将其配置为菜单按钮（目前是链接到主页的网站徽标）？ ---
### Author: ![Robin.Grant](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robin.grant/32/308261_2.png) [@Robin.Grant](https://meta.discourse.org/u/Robin.Grant) #### Post date: [2024年三月24日 14:03 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/16 "2024-03-24T14:03:11Z")
这个问题什么时候能修复？ ---
### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast) #### Post date: [2024年七月12日 21:02 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/17 "2024-07-12T21:02:18Z")
抱歉耽搁了，@benji 提交了一个修复程序，如果还有其他问题，请告诉我 > > > Before: > !\[Screenshot 2024-07-12 at 1 14 33 PM\](https://github.com/user-attachme…nts/assets/2fee9823-7699-480d-8253-1a6175ea6fe9) > > After: > !\[Screenshot 2024-07-12 at 1 14 17 PM\](https://github.com/user-attachments/assets/9ae1242b-e82a-4c7e-a82e-1d885fa83e87) ---
### Author: ![Robin.Grant](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robin.grant/32/308261_2.png) [@Robin.Grant](https://meta.discourse.org/u/Robin.Grant) #### Post date: [2024年七月12日 22:15 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/18 "2024-07-12T22:15:04Z")
非常感谢 @featheredtoast 和 @benji！ 我刚试了一下，但不幸的是，它似乎与我安装的另一个主题组件不兼容： > [@Custom Header Links (icons)](https://meta.discourse.org/t/custom-header-links-icons/86307): > > discourse2Summary Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-header-links-icons)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-icon-header-links](https://github.com/discourse/discourse-icon-header-links)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Screenshots Desktop Mobile Settings This component includes a … 请看截图（聊天图标移到了第二行）： ![The image shows the header section of a mobile app called "Trail Hub" by the UK MTB Trail Alliance, featuring their logo, menu icons, and a profile picture, along with a blurred image in the background that seems to be of a "Welcome to..." sign, possibly for a trail or outdoor area. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/1/b/2/1b252a88e618af11aa96406ef0893c8a373430f0.jpeg) 禁用“移动设备左侧汉堡菜单”主题组件后是这样的： ![IMG_2629](https://global.discourse-cdn.com/meta/original/4X/b/e/4/be470c4e179378626a1fd733e171e2fe590bd06c.jpeg) 希望这些信息有用！ ---
### Author: ![benji](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/benji/32/381510_2.png) [@benji](https://meta.discourse.org/u/benji) #### Post date: [2024年七月12日 23:43 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/19 "2024-07-12T23:43:47Z")
> [@Robin.Grant](#): > > 希望这有帮助！ 这很有帮助；谢谢！我今天差不多了，但会给自己留个便条，周一再检查一下。我想我知道是怎么回事了。 ---
### Author: ![benji](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/benji/32/381510_2.png) [@benji](https://meta.discourse.org/u/benji) #### Post date: [2024年七月15日 18:21 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/20 "2024-07-15T18:21:58Z")
> [@Robin.Grant](#): > > 请看截图（聊天图标移到了第二行）： > > ![The image shows the header section of a mobile app called "Trail Hub" by the UK MTB Trail Alliance, featuring their logo, menu icons, and a profile picture, along with a blurred image in the background that seems to be of a "Welcome to..." sign, possibly for a trail or outdoor area. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/1/b/2/1b252a88e618af11aa96406ef0893c8a373430f0.jpeg) > > 禁用“左侧汉堡菜单（移动端）”主题组件后，效果如下： > > ![IMG_2629](https://global.discourse-cdn.com/meta/original/4X/b/e/4/be470c4e179378626a1fd733e171e2fe590bd06c.jpeg) 周一快乐，@Robin.Grant！我想确认一下，这些截图是在下载了“左侧”主题的更新后截取的吗？我现在正在本地尝试重现这个问题。 ---
### Author: ![Robin.Grant](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robin.grant/32/308261_2.png) [@Robin.Grant](https://meta.discourse.org/u/Robin.Grant) #### Post date: [2024年七月15日 18:39 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/21 "2024-07-15T18:39:59Z")
是的 - 100% ---
### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast) #### Post date: [2024年七月15日 23:32 UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/22 "2024-07-15T23:32:36Z")
已修复此问题，非常感谢 @benji > > > Another small tweak. Double-checked, and there were no side-effects from this on… desktop mode. > > Before: > \Screenshot 2024-07-15 at 6 02 27 PM > > After: > \Screenshot 2024-07-15 at 6 01 54 PM > > Just this theme, to show nothing wacky happened: > \Screenshot 2024-07-15 at 6 22 06 PM 请试用一下 @Robin.Grant [下一頁](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513.md?page=2)