How to update Mega Menus from Javascript

I have a "mega menu" style menu on a site that I maintain. It is essentially a collection of nested <UL>

s. Since the full menu has 150 to 200 entries, it adds many pages to the page and makes screen readers painful.

I am planning to change the menu so that only the top menu level is displayed on the page, which cuts out 99% of it and remains usable in a non-javascript client.

If javascript is available, I plan on replacing the simple top level menu with a full mega menu. Ideally, the complete menu will be stored in a javascript file, as this will have the added benefit of allowing the browser to cache it (it doesn't change often).

My question is, how do people recommend storing the complete menu in a javascript file. At the moment I 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

      

        
        
        
      

    

It seems ugly. The obvious answer would be to get the html menu via an ajax request, but that will only work if I'm sure it will be cached, since I don't want any additional HTTP requests if I can help it.

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