汉堡菜单通过三条横线图标隐藏网站导航，有效节省小屏幕空间并增加内容展示区域。但这也增加了用户操作步骤，需展开菜单才能查看链接。
本文将解析汉堡菜单的工作原理、起源及其在移动网站设计中的应用指南。
什么是汉堡菜单？
汉堡菜单是一种可折叠导航组件，通过隐藏链接直至用户点击或轻触三条堆叠水平线图标（☰）来节省屏幕空间。
该按钮通常位于网站或应用的左上角或右上角，使访客能访问网站导航，同时将链接从主页面布局中移除。
汉堡菜单的历史
汉堡菜单于1981年在Xerox Star工作站上首次亮相。设计师Norm Cox创建它是为了将无法放入窗口标题栏的命令分组。
这三条线代表一组选项。几十年后，移动网站和应用采用了相同的紧凑格式以节省屏幕空间。
汉堡菜单的优点和缺点
汉堡菜单在电商用户体验中存在权衡：既节省屏幕空间，又隐藏了导航链接。
Statcounter记录显示，2026年9月美国移动网络流量占比为49.1%（按页面浏览量衡量）。您商店的流量分布和可用屏幕空间可指导您的选择。
优势
汉堡菜单在移动商务网站上节省屏幕空间，为产品和页面内容留出更多区域。该图标也广为人知。
Nielsen Norman Group的一项研究表明，参与者通常能将其识别为菜单，尤其是当它位于左上角时。
劣势
购物者必须打开菜单才能查看分类。Nielsen Norman Group 2025年报告回顾早期可用性测试发现，隐藏导航会导致任务成功率降低和完成时间延长，尤其是在桌面端。该文章指出汉堡菜单“可行，但并非适用于所有情况”。
何时使用汉堡菜单
建议查看Shopify的按设备划分的会话报告，比较您商店的移动设备和桌面端流量，然后为每种屏幕尺寸选择合适的布局：
- 使用汉堡菜单：当导航链接会挤占小屏幕空间时。保持搜索和购物车入口可见。
- 跳过汉堡菜单：当主要类别可以舒适地放置在可见的导航栏中时。
- 结合使用两种方法：当商店同时获得大量桌面端和移动端访问量时。在移动端使用汉堡菜单，在桌面端使用可见的类别链接。
现实世界示例：汉堡菜单的实际应用
以下示例展示了两种组织导航的方式。
TCB Jeans
TCB Jeans在所示示例中使用滑出式菜单。“Product”旁边的加号表示可展开的子菜单，将产品类别归组在一个标题下。
您可以使用Shopify的嵌套菜单创建类似结构：在“内容 > 菜单”中，将类别链接拖到父项（如“Products”）下方。
Gymshark
Gymshark的网站是响应式网页设计的典范，使其电子商务导航能适应屏幕尺寸。在所示示例中，桌面导航显示Women、Men、Accessories和Explore等类别链接。
移动导航在左上角使用汉堡按钮。打开移动菜单会显示搜索功能和产品类别。
左上角的X用于关闭菜单，并使购物者返回他们正在查看的页面。
如何为您的在线商店添加汉堡菜单
设计网站时，请预览主题的移动端导航以检查其是否提供所需的菜单布局。汉堡菜单通常使用HTML构建结构，CSS进行样式设置，并使用JavaScript控制开关。
Shopify主题提供了此功能，您可以通过管理后台和主题编辑器配置菜单，无需自行编写代码：
- 添加导航链接：在Shopify管理后台转到“内容”>“菜单”并打开主菜单。点击“添加菜单项”，输入清晰标签，选择目标位置，然后点击“添加”。对每个链接重复此操作后保存。Shopify的菜单编辑指南涵盖了这些步骤。
- 分组相关链接：要创建可展开的子菜单，请将链接拖到父项下方（例如将“牛仔裤”放在“商店”下方）。Shopify允许最多两层嵌套菜单级别，但显示位置取决于主题。请查阅主题文档确认层级支持情况并保存更改。
- 在主题中选择菜单：前往“在线商店”>“主题”并点击“编辑主题”。打开“页眉”部分找到菜单设置（有时位于菜单块内），选择您编辑的菜单。许多主题在移动端会自动将其隐藏在汉堡图标后面；桌面端的菜单选项因主题而异。
- 预览和测试：将主题编辑器切换为移动预览模式。打开汉堡菜单，展开每个子菜单并检查链接。对比桌面端布局，保存主题更改，并在手机上测试菜单。
汉堡菜单成功的小贴士
应用以下六项网站设计技巧，使您的汉堡菜单易于查找、打开和导航：
保持其始终可见
将汉堡按钮放置在用户期望找到导航的左上角。在各页面中保持位置一致，并在周围留出足够空间以区分附近控件。
坚持使用标准的汉堡图标
选择三条水平线（☰）。用户通常能识别这种形状，但熟悉程度各异。
添加可见的“菜单”标签以阐明用途，特别是针对经验较少的用户。避免使用装饰性边框或不寻常形状，以免被误认为其他控件。
优先排列菜单项层级
按照网站结构，将相关子类别分组在清晰标题下。将产品类别置于公司信息及政策之前。
Baymard Institute的导航研究发现，参与者通常会对超过约10个子类别选项感到不知所措。建议将长列表拆分为较小群组，并高亮显示当前所在类别以帮助定位。
当标题展开子菜单时，在其下方添加“查看全部”链接，以便购物者浏览整个类别。
确保移动友好性和无障碍访问
数据显示超过四分之一的美国成年人患有残疾，其中5.5%有视力障碍。请对菜单执行以下网站无障碍检查：
- 无障碍标签：为按钮命名（如“Menu”）以便屏幕阅读器朗读。标识导航区域，并传达菜单的展开或折叠状态。
- 触控目标：《Web内容无障碍指南》（WCAG）2.2规定最小尺寸为24 x 24 CSS像素（较小目标周围需有足够间距）。为更易于点击，建议达到44 x 44 CSS像素（更严格的AAA级标准）。
- 图标对比度：确保汉堡图标与其背景之间的对比度至少为3:1。
- 键盘访问：检查访客是否可以使用键盘打开菜单、浏览链接并关闭它，且具有可见的焦点指示器。
添加动画和视觉反馈
动态汉堡图标在下拉菜单打开时变为“X”形状，直观表示如何关闭菜单。
保持过渡动画简短，并为已禁用不必要动画的访客尊重减少运动偏好。
测试并获取反馈
请购物者使用菜单查找特定商品，观察他们在哪里犹豫、选择错误类别或返回上一级。
测试应包括使用键盘或屏幕阅读器的用户，随后修改令人困惑的标签并重复测试。
将汉堡菜单与其他导航工具结合使用
将汉堡导航与可见快捷方式配对，以便购物者直接到达目的地。根据屏幕空间和目录选择适合您的组合：
- 顶部导航+汉堡菜单：保持关键购物链接、搜索和购物车可见，将次要目的地放在菜单内。
- 选项卡导航+汉堡菜单：让选项卡在页面内切换相关产品组，将筛选和排序功能保留在单独且清晰标记的控制项中。
- 固定页眉+汉堡菜单：当购物者滚动页面时，保持菜单按钮、搜索和购物车可用。限制页眉高度以为产品留出空间。
- 面包屑导航+汉堡菜单：添加网站面包屑导航以展示产品在分类层级中的位置，并提供直接返回父级类别的路径。
使用相同的购物任务比较不同布局，记录完成时间和错误操作次数，选择能帮助购物者更轻松找到产品的版本。
汉堡菜单常见问题解答
三点菜单叫什么？
三点菜单通常称为“更多选项”或溢出菜单。三个垂直排列的点（⋮）也称为“kebab菜单”，而三个水平排列的点（…）有时被称为“肉丸菜单”。
网站上的汉堡菜单是什么？
在网站上，汉堡菜单是位于三条横线图标（☰）背后的导航面板，通常出现在页眉区域。在线商店可在移动端用它存放产品分类、账户链接和政策页面，而桌面端布局则可能将这些链接显示在可见的导航栏中。
为什么叫汉堡菜单？
该图标被称为“汉堡菜单”，是因为它看起来像汉堡包。其三条堆叠的水平线分别代表上层面包、肉饼和下层面包。
汉堡菜单的例子有哪些？
典型例子是移动服装店中的三条横线按钮，点击后会打开包含“上衣”、“牛仔裤”和“配饰”链接的面板。购物者点击该按钮即可查看分类，然后选择一个分类浏览其中的商品。
如何找到汉堡菜单？
要找到汉堡菜单，请寻找三条堆叠的水平线（☰），它们通常位于网站或应用界面的左上角或右上角。该图标可能出现在“Menu”一词旁边、下方或上方。点击或轻触该图标即可展开导航链接。