Dynamic Menu with JSON

This component makes it possible to load a list of pages which you have created on your Web site and to build a menu from there.
Futurely we will give him a little more elegant design, thanks to a style sheet, but for now, it is sufficient to add a new brick to our CMS. We have only to add a line to the JSON file when a new page is created, to complete the menu.

It is an Ajax script, which has the advantage of deliver us from using any server side programming language. Thanks to a simple Ajax function, we have just to create the XHR object.

This JSON file, and it is the true interest of this dynamic menu, can be generated automatically by an application, in particular when a new article is created and that we want to add it to the summary.

The script of the menu

This script is included in the head section of the demonstration page, and executed at loading of it by the onload event

window.onload=loadJSON

It comprises two functions:

loadJSON
Calls the function of creation of XHR object and load the file in the responseTxt attribute. The contents of this one are then given in parameter to the buildMenu function called as callback (its name is an argument of the loadJSON function).
buildMenu
Starts by the call of the eval() function which transforms the textual file given as argument into JavaScript.
Then the object is traversed in an iterative way (it could be it in a recursive way if one want to use sub-menues).
The tag of storage is found by the getElementByID DOM function and one adds to his contents each next element of menu by assigning it to the innerHTML attribute.

This script workss as well on a local computer without server.

The demonstration: Build a Menu From a JSON File

The demonstration displays the menu automatically at start.

This demonstration displays a menu which is defined in the following JSON file:

dynamic-menu.json

That is accomplished thanks to the Javascript menu.js script which is included in the head section of the present page.

It is an Ajax script, it makes use of the function defined in the file ajax.js.

The lines below are generated by the script: