How should I update Mega Menus from Javascript.

Question

I have some "mega menu" style menus on a site I maintain. These are essentially a set of nested <UL>s. Since there are about 150 to 200 entries in the complete menu, it adds a lot of bulk to the page and makes screen readers painful.

I plan to change the menus so that only the top level of the menu is output on the page, which will cut out 99% of it, and will remain usable in non-javascript clients.

If javascript is available, I plan to replace the simple top level menu, with the complete mega menu. Ideally, the complete menu would be stored in the javascript file, as this will have the added benefit of letting the browser cache it (it does not change often).

My question is, how would people recommend I store the complete menu in the javascript file. At the moment I just have something like...

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

This seems kind of ugly. The obvious answer would be to fetch the menu html via an ajax request, but this would only work if I can be sure it will be cached, as I don't want any additional http requests if I can help it.

If anyone has any good suggestions on getting a clean solution, please let me know.

Answer 1

What you could do is have serve, if you have a server-side programming, is a JSON JavaScript file with the navigation. This would be cached by the browser and then the JSON can be used to construct a menu.