我该如何从Javascript更新Mega菜单

Question

我在我维护的网站上有一些“超级菜单”样式菜单。这些本质上是一组嵌套的<UL>。由于整个菜单中大约有150到200个条目，因此会增加页面的大量体积并使屏幕阅读器变得痛苦。

我计划更改菜单，以便只在页面上输出菜单的顶层，这样可以减少99％的菜单，并且仍然可以在非javascript客户端中使用。

如果javascript可用，我打算用完整的大型菜单替换简单的顶级菜单。理想情况下，完整的菜单将存储在javascript文件中，因为这样可以让浏览器缓存它（它不会经常更改）。

我的问题是，人们如何建议我将完整的菜单存储在javascript文件中。目前我只是喜欢......

var menuhtml = '<ul id="megamenu"><li>blar blar...</ul>';
$("#megamenu").html(menuhtml);
// more code here to get the menu to work as needed

这看起来很难看。显而易见的答案是通过ajax请求获取菜单html，但这只有在我确定它将被缓存时才有效，因为如果我能帮助它，我不想要任何额外的http请求。

如果有人对获得干净的解决方案有任何好的建议，请告诉我。

Answer 1

如果您有服务器端编程，那么您可以做的是具有导航的JSON JavaScript文件。这将由浏览器缓存，然后JSON可用于构建菜单。