molendijk

In the old days, many designers used frames within framesets to present documents in multiple views. This allowed them to modify the menu for the whole site by just updating the page in the navigation frame. And visitors could go from one (content) page to another without causing a page (re)load in the navigation frame (or another frame).

Framesets were abandoned when people started to realize that their benefits didn't outweight their numerous problems and that other ways of updating small areas of the page (Ajax, server side includes) were available. These new techniques are superior to framesets, except for ...

Except for one thing, hardly known or mentioned: the new techniques cause a reload of the navigation menu each time visitors go to the pages where it is included. For instance, when we use <?php include("menu.php"); ?> on our pages, visitors load both their contents and the menu at page entrance / at page transition. This is not desirable. Something static (like the navigation menu) should not reload. Note that this is not just a theoretical problem without practical impact. Every unnecessary page reload may cause unnecessary 'flicker' on the screen.

Fortunately, the new cross-browser HTML5 window.onhashchange event allows us to 'mimic' the frameset-method without its disadvantages. The idea is the following:

1. In index.html we put our menu (together with all the js and css needed to make it standalone). We also put there everything else we want to be visible on all pages: banner, images etc.
2. Also in index.html, we put a div for loading our content pages with the help of the window.onhashchang event and the jquery load method.
3. When we click on an item of the menu in index.html, the div's content is replaced with other content and the URL in the address bar changes, but we don't leave index.html. So there's no reload of the navigation menu.
4. On the other pages of our site we put a script ensuring that they don't show as 'orphans' (= without the menu etc. in index.html) when accessed directly.

This is an exact mimic of what happens in framesets, where the navigation frame will not reload when the content frame loads a new page.

Click here for further explanations and demos. Click here to go to a (Dutch) site where the idea is fully implemented (hit 'Pagina's' there).