Javascript html页面中的菜单-将导航与内容分开

在为html页面创建菜单时，有很多库、框架和插件（如前所述）。然而，在研究了各种选择之后，我觉得

• 菜单是在一个页面上定义的一系列元素，有选择地显示/隐藏这些元素

---

• 菜单项激活的所有内容与所有菜单定义一起包含在同一页面上

在我看来，这带来了两个问题：

• 随着页面大小的增长，（单个）页面趋向于“不可管理”
• 搜索“第三页”中包含的内容将导致打开“第一页”，对于用户来说，可能不太清楚他/她必须点击菜单才能找到他/她正在寻找的内容

---

因此，我正在寻找一种菜单和内容更加分离的东西，但仍然利用现代框架（jQuery（UI）、dojo等）的样式特性，可能是基于JSON定义的，可以加载到每个单独的页面中。

除非你有一个巨大的菜单选项列表，一个树形结构的

ul

不会那么重。您可以将该菜单放在另一个容器中，将内容放在另一个容器中，这样就不会太难管理了

另一方面，在不同的HTTP调用中部署菜单以获取JSON数据并呈现它，可能比以前更难管理。首先，您需要两个HTTP调用，考虑到浏览器在同一时间只会对同一域发出两个HTTP调用，以获取阻止浏览器获取其他内容的菜单，或者反之亦然。您必须考虑HTTP开销，并且菜单查询将在下载html和JS之后发出

我认为最好的性能是在页面代码中保留html菜单，并用CSS呈现

---

你可以试着自己建造它。在页面的就绪事件中，使用jQuery从服务器下载json菜单数据，构建html，应用所需样式并将其添加到页面中。

根据请求回答。：）

对您的体验的评论表明，您遇到的不仅仅是真正的导航，而是选项卡控件。选项卡控件用于在同一页面上的内容之间切换，根据选择的选项卡隐藏和显示内容。这确实有您建议的缺点，即要求所有内容都在同一页面上（或使用ajax加载）

相反，菜单系统通常只是一种格式化一组链接的方式，可能是一种层次结构。通常，原始HTML中的菜单系统是一个无序列表，其中包含链接和其他无序列表。具体格式可能因使用的菜单系统而异。菜单系统将告诉您将类放在顶层，或者在特定元素上运行一些javascript

在生成此服务器端时，最好使用include文件或通用服务器端代码来生成菜单（以避免在站点的所有页面中单独维护菜单）

---

说了这么多，我没有具体的推荐，但我确实遇到了为什么谷歌在“jquery导航菜单”方面最受欢迎，而且有很多选择。此外，您链接的问题中的一个看起来像是一个“正确的”菜单系统。

“菜单项激活的所有内容都包含在同一个页面上-以及所有菜单定义”-我觉得这不太可能。我希望大多数菜单系统希望每个页面的内容都在不同的页面上，而不是在同一页面上隐藏或显示。你能举一个例子，看看哪些人能做到这一点吗？@Chris举个例子。。。源代码有点可怕，我想说的是，选项卡控件（您提供的链接上似乎有）和菜单之间有着明显的区别。您从另一个问题链接的一个问题似乎是一个示例，它只是重新设计了

的样式，以提供良好的UI。我不能具体地提出任何建议，但我怀疑您所看到的是选项卡控件，而不是正确的导航控件。是谷歌上最热门的“jquery导航菜单”，看起来它有很多选项可供选择…@Chris，如果你能从中找到答案的话。。。在你的链接中似乎有足够多的提示，可以从中获取。同意大多数。。。尤其是你的第四段。。。如果有什么现成的东西支持这种方法，我会很高兴地看一看