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

Question

在为html页面创建菜单时，有很多库，框架和插件（如提到的here）。然而，在我看来，研究了各种选择

• 菜单是在一个页面上定义的一系列元素，有选择地显示/隐藏
• 菜单项激活的所有内容都包含在同一页面上 - 连同所有菜单定义

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

• （单一）页面随着规模的增长趋于“无法管理”
• 搜索“第三页”中包含的内容将导致打开“第一页”，对于用户而言，他/她必须点击菜单才能找到他/她的内容可能并不明显她在寻找

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

Answer 1

除非你有一个庞大的菜单选项列表，否则结构ul的树不会那么重。您可以将该菜单放在不同的容器上，将内容放在其他容器中，这样就不会难以管理。

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

恕我直言，我认为在页面代码中保留html菜单并使用CSS进行渲染会获得最佳性能。

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

Answer 2

根据要求作出答复。 ：）

对您的体验的评论表明，您遇到的标签控件比实际导航更多。选项卡控件旨在在同一页面上的内容之间进行切换，根据选择的选项卡隐藏和显示内容。这确实有一个缺点，你建议要求所有内容在同一页面上（或使用ajax加载它）。

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

在生成此服务器端方面，您最好使用包含文件或公共服务器端代码来生成菜单（以避免必须在您网站的所有页面中单独维护它们）。

说了所有我没有具体的建议，但我确实遇到了http://www.1stwebdesigner.com/css/36-eye-catching-jquery-navigation-menus/ whcih是“jquery导航菜单”的热门谷歌热门，并有很多选项可供选择。此外，您链接的问题中的一个看起来像是一个“适当的”菜单系统。