# 寻求帮助：如何创建带下拉菜单的顶部菜单栏（平滑加载）

**URL:** https://meta.discourse.org/t/seeking-help-how-to-create-a-top-menu-bar-with-dropdown-smooth-load/374919
**Category:** Support
**Tags:** header-submenus
**Created:** [2025年七月19日 22:28 UTC](https://meta.discourse.org/t/seeking-help-how-to-create-a-top-menu-bar-with-dropdown-smooth-load/374919 "2025-07-19T22:28:29Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Steve\_John](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steve_john/32/435022_2.png) [@Steve\_John](https://meta.discourse.org/u/Steve_John)
#### Post date: [2025年七月19日 22:28 UTC](https://meta.discourse.org/t/seeking-help-how-to-create-a-top-menu-bar-with-dropdown-smooth-load/374919/1 "2025-07-19T22:28:30Z")

</div>

大家好，

我们正在努力实现一个带有下拉功能的顶部导航菜单——类似于在以下网站上看到的：

- [Spiceworks Community](https://community.spiceworks.com/)
- [Wyze Forums – News Section](https://forums.wyze.com/c/news/21)
- [Docker Community Forums](https://forums.docker.com/)

我们目前正在使用 **Landing Pages** 插件来构建静态页面并集成菜单。但是，我们遇到了一个视觉问题：当页面加载时，菜单会短暂地出现失真，然后才重新对齐——这使得过渡感觉粗糙且不流畅。

我们正在寻找：

1. 在 Discourse 中构建 **带有下拉菜单的顶部菜单** 的替代方法（如上面的示例）。
2. 提高 **菜单渲染性能** 以实现更流畅加载的建议。
3. 确保 **每个子菜单项都可以链接到其自己的自定义 HTML 页面** 的方法。

任何见解、代码技巧或插件推荐都将不胜感激！

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/6/2/f6277643a61200c47448eeb0d611cbdb231d6bb4.jpeg)

提前感谢！

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [2025年七月19日 23:01 UTC](https://meta.discourse.org/t/seeking-help-how-to-create-a-top-menu-bar-with-dropdown-smooth-load/374919/2 "2025-07-19T23:01:24Z")

</div>

这是您在寻找的吗？[Header Submenus](https://meta.discourse.org/t/header-submenus/94584)

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2025年七月19日 23:23 UTC](https://meta.discourse.org/t/seeking-help-how-to-create-a-top-menu-bar-with-dropdown-smooth-load/374919/3 "2025-07-19T23:23:08Z")

</div>

除了 Dave 的组件建议之外，还有这个。

> [@down\_arrow Dropdown Header](https://meta.discourse.org/t/dropdown-header/226170?u=heliosurge):
>
> mag Overview This theme component allows you to add links with text, icons, and dropdowns to the native header of your Discourse site. Bug reports, feature requests, and PRs are most welcome; sponsorship enables work on this component to be prioritised by the Pavilion team. computer Code [View the GitHub Repo](https://github.com/paviliondev/discourse-dropdown-header)gear Settings There are a variety of settings you can configure to customize the component, including link customizations, icon sourcing, adding link security, positioning…

---

<div class="post-metadata">

### Author: ![Steve\_John](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steve_john/32/435022_2.png) [@Steve\_John](https://meta.discourse.org/u/Steve_John)
#### Post date: [2025年七月21日 02:30 UTC](https://meta.discourse.org/t/seeking-help-how-to-create-a-top-menu-bar-with-dropdown-smooth-load/374919/4 "2025-07-21T02:30:15Z")

</div>

感谢 @Heliosurge、@mcwumbly……这个解决方案对我有效，我也能摆脱这个问题了……