Page Menu

The page menu can be invoked at two positions on every webpage, i.e. in the top-left inset and in the bottom horizontal bar. Each option is identified by its own <div id=xyz> and is formatted using a different CSS class.


<body onload="pageMenu()..">
<div id="webpage">
          <! start of #header div>
          <! start of #top bar div >
          <! start of #left div >
          <div id="left">
                   <div id="parentNav" class="insetLH">
                   <! page menu goes here>
         <! start of #bbar div >
         <div id="bbar">
                   <div id="pageBbar">
                   <! Page menu goes here as well>

Irrespective of where the page menu is invoked, it offers up to seven potential page links, as listed below. Whether all the options shown below are actually displayed depends on whether that option exists for the current page. For example, if you are already at the bottom of the current branch of the tree structure, then the 'Down' option does not exist and will not therefore be displayed.

Top Home Up Next Previous Down SiteMap

However, before outlining how the page menu works, it is worth simply explaining the basic concept of a hyperlink. In the table above, the Top option has been assigned a static hyperlink, which can be viewed in the HTML source in the following form:

<a href="">Top</a>

This HTML statement defines the hyperlink, which is typically underlined and turns red, when the mouse hovers over the link. If you then click on this underlined word, i.e. Top, the hyperlink is invoked and you jump to this new page. Of course, you need to come back to this page, if you test this out, in order to find out how the page menus work!

So how does page menu use this mechanism?

Unlike the static example above, which is embedded in the main <body> of the HTML page, the HTML associated with both forms of the page menu is created within a javascript module, which then creates and displays a HTML string, as per previous menu examples. However, as the actual pageMenu function is quite long, the following code is only representative of the main idea:

function pageMenu()
// determine current page number
pageTitle = document.title.split('.');
pageTag = pageTitle[0];
pageLabel = pageTitle[1];

// setup <div ids> for both forms of pageMenu
var parentDiv=document.getElementById('parentNav')
var bbarNav=document.getElementById('pageBbar')

// This array is also created by MakeMenu
// it simply maps the page number into a tree index
treeIndex = tree1Tags[pageTag];

// This loads the appropriate index, if it exists

// each form of pageMenu has its own CCS link list definitions
header1 = '<div class="linkList1" >'
header2 = '<div class="linkList2" ><br>'

// The sub-function menuInset creates the HTML string to be displayed
// which includes the appropriated hyperlinks for each valid option

// output to top & bottom pageMenus
parentDiv.innerHTML = header1 + str;
bbarNav.innerHTML = header2 + str;

The first few lines of the pageMenu() function can determine the page number of the current page, because it is encoded in the <title> of every HTML page. For example, the ID number of the current page has the following <title> statement:


The numeric value is separated out and then has to be convert to a page index within the tree array, which then allows all the adjacent values required by pageMenu() to be determined. If these values exist, they are numeric, otherwise they assume a default alphabetic value, which are then checked within the function menuInset(). This function will not be detailed as it basically replicates the string (str) build mechanisms used by other menus. However, each valid page menu option, when displayed, is associated with a hyperlink, as described above. As such, this string can be simply written to the webpage within <div id="parentNav"> and <div id="pageBbar">, using different CSS link list classes, and then activated as normal by a mouse-click.