移动端底部导航栏

操作指南 Pro Navigation 3 分钟阅读

顾客滚动页面时，导航栏会一直显示在屏幕上，就像手机应用的标签栏一样，一次点按即可进入首页、菜单、购物车、搜索、聊天或拨打电话。项目也可以打开一个小型子菜单，例如包含账户、联系我们和常见问题链接的 More（更多）项目。

底部导航栏编辑器：设置选项卡 (1) 和实时预览 (2)。使用预览左下角的按钮切换预览设备。

设置选项卡包括 菜单项、常规、排版、颜色、位置、高级 和 版本历史。

创建底部导航栏

1. 创建导航栏

   在应用的 首页 上，点击 添加底部导航；或者在 菜单管理器 中点击 创建菜单，然后选择 移动端底部导航栏。

   

   首页：(1) 创建或导入菜单的快捷操作，(2) 激活应用嵌入的按钮

2. 设置项目

   在 菜单项 中，编辑默认项目并添加您自己的项目。请参阅添加和编辑项目。

   

   底部导航栏编辑器：设置选项卡 (1) 和实时预览 (2)。使用预览左下角的按钮切换预览设备。

3. 设置导航栏样式

   调整 常规、排版 和 颜色 选项卡。请参阅设置导航栏样式。

   

   常规设置，包括子菜单的位置和展开方式。

4. 选择显示位置

   在 位置 中，选择设备和屏幕上的位置。请参阅选择导航栏的显示位置。

   

   为移动端 (1) 和桌面端 (2) 开启导航栏，然后选择位置。

5. 保存并发布

   点击 保存，然后点击右上角的 发布。请参阅发布导航栏。

添加和编辑项目

1. 显示项目操作

   在 菜单项 中，将鼠标悬停在某个项目上，即可显示 编辑、复制 和 删除。拖动项目的手柄可调整顺序。

   

   将鼠标悬停在项目上，即可编辑、复制或删除。

2. 添加项目和子菜单

   点击 添加项目 可在该层级添加项目；点击某个项目上的 添加子菜单 可在其下嵌套项目。嵌套的项目会以子菜单的形式打开，最多三级。

3. 设置图标、标题和链接

   点击 编辑 打开 编辑菜单项。选择 图标（点击 更改），输入 标题，然后点击 链接 字段。

   

   点击链接字段，选择项目的操作。

4. 选择操作

   在 选择链接 中，点击某个操作旁的 选择 (1)。链接 框 (2) 会填入链接的开头部分，例如 按系列分类的产品 对应 /collections/。按照 语法 列中的格式补全链接，例如 /collections/summer-sale，然后点击 更新 (3)。

   

   点击选择 (1)，补全链接 (2)，然后点击更新 (3)。

项目设置

图标

点击 更改 选择图标或上传图片。

标题

显示在图标下方的文字。

链接

点按后执行的操作。点击即可打开 选择链接（请参阅项目操作）。

在新标签页中打开

在新的浏览器标签页中打开链接。

描述

随项目显示的可选简短文字。

图标大小

图标大小，单位为 px。

Box > Border radius

将项目方框的边角变圆，0 到 100 px。

Box > Box padding

项目方框内部的间距，0 到 100 px。

Box > Position

将项目向左（负值）或向右（正值）移动，-100 到 100 px。

颜色

仅针对此项目的文字、图标、图标背景和背景颜色，每种颜色都有对应的悬停颜色。清除设置 会恢复为导航栏的颜色。

徽章

项目上的小标签，包含 标题、徽章文字颜色 和 徽章背景色。

可见性

在某些设备上或对某些顾客隐藏项目，或仅在两个日期之间显示。请参阅显示规则。

高级

额外的类名 用于添加 CSS 类，以便使用自定义 CSS。划分 会在项目旁添加一条分隔线。

项目操作

选择链接 将操作分为八个部分。点击操作旁的信息图标即可查看示例。

1. Link to your store internal pages

链接到商店内部页面：精确短网址 /[your-url]、首页 /、所有产品 /collections/all、按产品系列分类的产品 /collections/[collection-handle]、产品详情 /products/[your-product-shorturl]、所有博客文章 /blogs/news、博客文章详情 /blogs/news/[your-blog-shorturl]、页面详情 /pages/[your-page-shorturl]、购物车页面 /cart、搜索页面 /search、联系表单 /pages/contact。

2. Open panels (Compatible with popular themes)

打开面板（兼容热门模板）：打开菜单（移动端）gm-open:MobileMenu、打开购物车 gm-open:Cart、打开搜索 gm-open:Search。

3. Open other applications (E.g. Shopify inbox...)

打开其他应用：打开聊天框 gm-open:Inbox 会打开 Shopify Inbox 聊天。

4. Scroll on page

页面滚动：滚动到顶部 gm-scroll:Top、滚动到底部 gm-scroll:Bottom、滚动到页面上的某个元素 gm-scroll:OnPage(htmlElement)。

5. Call javascript function

gm-javascript:Function 会在您的网站上运行一个 JavaScript 函数。

6. Support tools

支持工具：拨打电话 tel:、发送短信 sms:、发送电子邮件 mailto:，以及通过 Messenger、WhatsApp、Telegram、Line 或 Zalo 聊天。

7. Share

分享：复制当前网址 gm-share:CopyUrl、分享到 Facebook gm-share:Facebook、分享到 X (Twitter) gm-share:X。

8. Link to extend websites

外部网站链接：完整网址（任意完整网址）、不跳转 #。

第 2 至 4 部分：打开面板、其他应用和滚动。

第 5 和 6 部分：JavaScript 和支持工具。

第 7 和 8 部分：分享和外部链接。

示例：

• gm-scroll:Top(150)：滚动到顶部，保留 150 px 的边距。
• gm-scroll:OnPage(#page-title)：滚动到 ID 为 page-title 的元素。
• tel:+0123456789：拨打此号码。
• sms:+012345678?body=I need help：打开已填好文字的短信。
• https://wa.me/0123456789：打开 WhatsApp 聊天。请使用国家/地区代码，不要加 +。

设置导航栏样式

常规设置，包括子菜单的位置和展开方式。

常规

主菜单（第 1 级）

菜单圆角

导航栏的圆角半径，0 到 50 px。

项目间距

项目之间的间距，0 到 50 px。

Padding inline · Padding block

每个项目内部的水平和垂直间距，0 到 100 px。

使用盒子阴影

在导航栏周围添加阴影。

子菜单（第 2、3 级）

子菜单位置

左、右、居中 或 全宽。

子菜单展开方式

下拉菜单 或 滑出。

子菜单宽度

100 到 900 px。

Padding inline · Padding block

每个子菜单项内部的水平和垂直间距，0 到 100 px。

图标与文字

图标大小 · 子菜单图标大小

导航栏及其子菜单的图标大小，0 到 100 px。

主菜单间距：文字 - 图标 · 子菜单间距：文字 - 图标

图标与文字之间的间距，0 到 50 px。

高级

隐藏菜单文本

导航栏中只显示图标。

隐藏子菜单文本

子菜单中只显示图标。

隐藏子菜单描述

隐藏子菜单中的项目描述。

排版

为 主菜单、子菜单文本 和 子菜单描述 设置 字体、Font weight（字重）和 字号。使用自定义字体 的用法与调整菜单字体中相同。

颜色

主菜单颜色

文字颜色、Hover text color（悬停文字颜色）、Icon color（图标颜色）、Hover icon color（悬停图标颜色）、背景颜色、Hover background color（悬停背景颜色）。

子菜单颜色

同样的六种颜色，用于子菜单。

其他菜单颜色

Description color（描述颜色）、Hover description color（悬停描述颜色）、Divide color（分隔线颜色）。

选择导航栏的显示位置

1. 选择设备

   在 位置 中，开启 移动设备上显示 (1)、桌面上显示 (2)，或同时开启两者。

   

   为移动端 (1) 和桌面端 (2) 开启导航栏，然后选择位置。

2. 选择位置

   点击每个开关下方的布局：

   • Mobile（移动端）：底部、顶部、左侧居中、右侧居中、左下角或右下角。
   • Desktop（桌面端）：底部居中、左下角、右下角、底部全宽、左侧居中或右侧居中。

3. 滚动时隐藏（可选）

   选择 向下滚动时隐藏，这样顾客向下滚动时导航栏不会遮挡内容。

高级设置

市场可用性

仅在所选市场中显示导航栏。请参阅按市场显示菜单。

菜单 z-index

层叠顺序。如果其他元素遮挡了导航栏，请调高此值；如果导航栏遮挡了弹窗，请调低此值。

菜单不透明度

导航栏的透明度，0 到 100%。

下边距

导航栏与屏幕底部之间的距离。

样式表 / CSS

导航栏的自定义 CSS。

JavaScript

导航栏的自定义 JavaScript。

显示规则

位置	设置	效果
位置 选项卡	移动设备上显示、桌面上显示	按设备显示或隐藏整个导航栏。
高级 选项卡	市场可用性	仅在所选市场中显示整个导航栏。
项目 > 可见性	在桌面上隐藏、在移动设备上隐藏	在某种设备上隐藏单个项目。
项目 > 可见性	登录后隐藏、仅在登录时显示	单个项目仅向访客显示，或仅向已登录的客户显示。
项目 > 可见性	计划发布	单个项目仅在 开始日期 和 结束日期 之间显示。

发布导航栏

1. 发布

   点击 保存，然后点击右上角的 发布，选择模板并确认。该对话框的用法与超级菜单相同（请参阅发布菜单）。状态会从 草稿 变为 活跃。

   

   发布菜单对话框：(1) 选择主题，(2) 预览并发布

2. 检查您的店面

   在手机上或较窄的浏览器窗口中打开您的店面。

更改或移除

• 从店面移除：点击编辑器顶部的 停用。
• 恢复早期版本：打开 版本历史 选项卡。请参阅版本历史。

故障排除

导航栏没有显示在我的店面上

与所有菜单一样，导航栏通过应用嵌入加载。请确保该模板已开启应用嵌入，请参阅启用应用嵌入。

打开面板操作没有反应

Open panels（打开面板）操作会打开您模板自带的菜单抽屉、购物车抽屉或搜索，因此适用于热门模板。如果在您的模板上没有反应，请改为链接到对应页面（例如 购物车页面 /cart），或联系我们。

导航栏遮挡了聊天按钮或 Cookie 横幅

在 高级 选项卡中调高 下边距 或更改 菜单 z-index，或者在 位置 选项卡中选择其他位置。

相关页面

• 启用应用嵌入开启 Globo Mega Menu 应用嵌入，让菜单能够在店面上加载。
• 为菜单项添加图标在菜单项标题旁显示图标库中的图标或您上传的图片。
• 版本历史将菜单之前保存的版本加载到编辑器中并保存，即可恢复该版本。
• 套餐和账单比较 Globo Mega Menu 的各个套餐，开始免费试用，以及升级、降级或取消套餐。

此页面对您有帮助吗？

报告问题