I'm working on a webpage, and it has several menus that aren't always visible. As far as I know, there are 3 ways to implement the menus:
1. I can declare the menus in the index.html file, and set their styles to "display: none" and show/hide them as needed. For example:
<div id="div-to-always-show">I want to always show this</div>
<div id="menu-to-sometimes-show" style="display:none">I want to sometimes show this</div>
$("<div>").text("I want to sometimes show this")
var $menu = null;
if($menu === null)
$menu = $("<div>").load("menuToSometimesShow.html");
to include it in the HTML and hide the element either indirectly by a class or directly via
display:none; depending on the case is mostly the way to go if your menu isn't too big, e.g. includes just a handful of links.
when you load big menus, maybe with one or several sub menus, maybe even including images then it definitely makes sense to handle this via seperate AJAX requests. In more complex cases it makes even sense to only submit parts of the menu on need, e.g. you don't need submenu 2 to 9 if just 1 has been clicked.