了解如何使用 Hostinger 建站工具创建可展开菜单。

Hostinger 建站工具 中,根据你是否希望下拉菜单拥有一个专属着陆页,有两种创建方式:

链接(包括下拉菜单)在编辑器和 预览模式 中常被屏蔽,因为其中部分链接在你发布更新网站前在技术上甚至可能还不存在 💡

创建简单下拉菜单

Website Builder Pages and navigation panel with the Add new dropdown button highlighted
Website Builder Pages and navigation panel with the Add new dropdown button highlighted
Website Builder pages menu with New dropdown settings open and Rename option highlighted
Website Builder pages menu with New dropdown settings open and Rename option highlighted

简单下拉菜单在鼠标悬停于其标题上时自动展开。该标题不可点击,即即使被点击也不会打开任何页面。

  1. 在编辑器内,展开左侧的 页面与导航(Pages and navigation) 面板,点击下方的 添加新下拉菜单(Add a new dropdown)

下拉项会被插入到你网站的导航菜单中。

  1. 重命名下拉菜单:

  2. 要为下拉菜单分配页面(或链接),请用六点手柄拖动每个页面(或链接),使其显示在下拉菜单下方:

创建带有专属着陆页的下拉菜单

Hostinger Website Builder pages and navigation panel with a drag handle highlighted for moving a menu item
Hostinger Website Builder pages and navigation panel with a drag handle highlighted for moving a menu item

带有专属着陆页的下拉菜单在鼠标悬停于其标题上时自动展开。但与简单下拉菜单不同,该标题可点击,会打开你下拉菜单的主页面。

  1. 在网站编辑器中,打开左侧的 页面与导航(Pages and navigation) 板块。选择你想作为下拉菜单主页面的页面。这意味着该页面的标题将成为你下拉菜单的标题。你也可以为此新建一个页面;当有人点击下拉标题时,它会被打开。

  2. 要创建下拉菜单,请用六点手柄拖动页面(或链接),使其显示在你的主下拉页面下方(向右,使其显示在小页面图标下方):

从下拉菜单中移除项目

Hostinger Website Builder pages menu open with “Move out of dropdown” option highlighted for a page
Hostinger Website Builder pages menu open with “Move out of dropdown” option highlighted for a page

要从下拉菜单中移除页面或链接,请展开左侧的页面与导航面板,找到你想从下拉菜单中移除的项目(页面或链接)。点击设置齿轮并选择 从下拉菜单移出(Move out from dropdown)

被移除的项目不会被删除。它只会变成一个单独的、在你的导航菜单中可见的项目(页面或链接)。

如果你删除整个下拉菜单,分配给它的项目也不会被删除;它们会变成单独的项目(页面或链接),并在你的导航菜单中可见。

更改下拉菜单的背景颜色

Hostinger Website Builder header settings panel with transparent header toggle highlighted
Hostinger Website Builder header settings panel with transparent header toggle highlighted

如果你在页眉设置中开启了透明页眉(transparent header)设置,你的下拉背景也会显示为透明。

要修复此问题:进入页眉设置(Header Settings),然后关闭透明页眉(Transparent Header)设置:

最后,选择你想要的页眉具体背景颜色(你为页眉背景选择的相同颜色,也会应用到下拉背景)。

来源:Hostinger 官方帮助文档