跳转到内容
GloboGlobo Docs
安装应用
简体中文

在 CSS 选择器上显示菜单

输入模板元素的 CSS 选择器，将菜单精确放置到这些元素上。

操作指南 所有套餐 1 分钟阅读

应用会将您的菜单放到每个匹配元素的 内部，替换其内容。当自动替换和替换现有菜单在自定义或大量修改过的模板上无效时，或者需要放在特定位置、仅在桌面端或仅在移动端显示菜单时，请使用此选项。

设置 CSS 选择器

  1. 选择“在该 CSS 选择器上显示菜单”

    在菜单编辑器中，点击左侧栏中的 设置 选项卡。在 位置 下，选择 在该 CSS 选择器上显示菜单。

    在该 CSS 选择器上显示菜单及其两个选择器字段

  2. 输入选择器

    填写设置中说明的两个字段。灰色的 #SiteNav 和 #AccessibleNav 只是占位文字，不是已保存的值。

  3. 保存并发布

    点击 保存，然后发布菜单。在桌面端和移动端检查您的店面。

设置

主菜单的 CSS 选择器
包含 桌面端 菜单的元素，例如 #SiteNav、.header__inline-menu 或 nav.main-menu。留空则仅在移动端显示菜单。
移动端菜单的 CSS 选择器
包含 移动端 菜单的元素，例如 #AccessibleNav 或 .menu-drawer。留空则保留模板的移动端菜单（仅桌面端显示）。
  • 多个元素：用逗号分隔选择器，例如 .header__inline-menu, .sticky-header nav。菜单会放入每个匹配的元素。
  • 两种布局使用同一个元素：在两个字段中输入相同的选择器。应用会根据屏幕尺寸在桌面端和移动端布局之间切换。
  • 选择容器，而不是单个链接：匹配包裹整个菜单的元素（通常是 <nav> 或 <ul>），否则菜单会出现在某一个菜单项内。
  • 优先使用稳定的选择器：ID 或模板类名，例如 .header__inline-menu。像 body > div:nth-child(3) > … 这样自动生成的选择器在模板更改后会失效。

查找 CSS 选择器

您也可以点击字段下方的 如何找到菜单的 CSS 选择器？。

  1. 检查菜单

    在 Chrome 中打开您的商店，右键点击菜单并选择 Inspect（检查）。

  2. 找到菜单容器

    在 Elements（元素）面板中，将鼠标悬停在各个标签上。找到高亮区域覆盖整个菜单的最近的 <nav> 或 <ul>。

  3. 复制选择器

    使用 # 加上其 id（#SiteNav），或 . 加上清晰的类名（.header__inline-menu）。也可以右键点击该标签，选择 Copy > Copy selector（复制 > 复制选择器），然后粘贴到应用中。

  4. 对移动端重复操作

    点击 DevTools 中的设备图标，选择一款手机，然后打开移动端菜单（汉堡图标）。重复上述步骤获取移动端选择器。

想把菜单放在模板中原本没有菜单的位置？参阅添加自定义菜单位置。

此页面对您有帮助吗？

报告问题