Building the Imperfect Beast: Part 1 (menus.js)

The content of each menu will be contained within a discrete layer. Ultimately, all of these layers will reside within the spawned window which will behave as the pop-up menu. It's important to remember that the content of these menus must be easily modified by a non-programmer, a person at the client's end who can maintain these pop up menus in the future. We begin, then, by creating a file containing the hyperlinks for the menus. This file merely creates an array for each topic. Each array contains the hyperlink data in pairs -- link text followed by link URL. We've named this file menus.js.

menus.js

annuities_links=new Array( "Link 1","http://link1.html", "Link 2","http://link2.html" ) auto_links=new Array( "Link 1","http://link1.html", "Link 2","http://link2.html", "Link 3","http://link3.html" ) business_links=new Array( "Link 1","http://link1.html", "Link 2","http://link2.html", "Link 3","http://link3.html", "Link 4","http://link4.html" ) health_links=new Array( "Link 1","http://link1.html", "Link 2","http://link2.html", "Link 3","http://link3.html" ) home_links=new Array( "Link 1","http://link1.html", "Link 2","http://link2.html", "Link 3","http://link3.html" ) life_links=new Array( "Link 1","http://link1.html", "Link 2","http://link2.html", "Link 3","http://link3.html" ) personal_links=new Array( "Link 1","http://link1.html", "Link 2","http://link2.html", "Link 3","http://link3.html" ) ratings_links=new Array( "Link 1","http://link1.html", "Link 2","http://link2.html", "Link 3","http://link3.html" ) state_links=new Array( "Link 1","http://link1.html" ) toolbox_links=new Array( "Link 1","http://link1.html", "Link 2","http://link2.html", "Link 3","http://link3.html" ) features_links=new Array( "Link 1","http://link1.html", "Link 2","http://link2.html" ) help_links=new Array( "Link 1","http://link1.html", "Link 2","http://link2.html", "Link 3","http://link3.html" ) sponsor_links=new Array( "Link 1","http://link1.html" )

Each array can essentially hold any number of links, but it is quite crucial that proper JavaScript syntax be adhered to. Specifically, that means a comma between each entry except after the final entry of the array. Additionally, each entry must be contained within quotation marks, and we've chosen to use double-quotation marks here. In a case where the link text itself might need to contain a quotation mark, such as Learning the "new" math, one must use an escaped double-quotation mark (\") within the link text. In other words: "Learning the \"new\" math".

Isolating the menu contents within the discrete menus.js file will benefit the client, who will not have to wade through heavy program code to modify the menus.

All of the layout of the menus, meaning the layers, and some of the control, meaning the menu behavior, will be contained within a single file which will be loaded into the spawned menu window, a file named popups.html. The remaining code which spawns the menu window and pulls its strings will be embedded into the client's original page(s). We continue, then, by looking at the menu window itself, popups.html.

The Great Layers Bug and Dead End Syndrome
DHTML Pop-Up Menus: A Parable of Triumph and Loss (Based on a True Story)
Building the Imperfect Beast: Part 2 (popups.html)