The top menu is a form of drop-down menu that is displayed in a horizontal bar near the top of each webpage. If you move your mouse across each item in the initial menu displayed, additional sub-topics are then displayed as a drop-down list, which can be selected and act as a hyperlink to the appropriate page. In the context of this website, the top menu simply provides a fairly obvious way of presenting some of the main topics discussed to new users.
So how does it work?
Again, the full details will be reduced to a subset, which hopefully still shows the main aspects of the code. First, within the template of every page is the following HTML source, which can be viewed in detailed by invoking the 'view/source' on your browser.
<body onload="topMenu(); .">
<! start of #header div>
<header stuff goes here>
<! start of #top bar div >
<div id="myTbar" class="insetTbar">
<! topMenu loads here >
// this statement links to the <div id="tbar"> in the HTML above
// code builds the string (str) that will be displayed at bottom
str = '<div id="menu">'
// String consists of a HTML nested list
str += '<li><a class="topMenu" href="/html/1.Home.html">1:Website1 ⇒</a>'
// secondary items display in drop-down menu
str += '<ul>'
str += '<li><a href=" /html/2.Status.html">Status</a></li>'
str += '</li>'
str += '</ul>'
// finally terminate the string (str) declaration with closing <div>
str += '</div>'
// this code displays HTML list in <div id="tbar">
tbarDiv.innerHTML = str;
So, in general terms, the javascipt code creates a string that contains the definition of a nested HTML list and displays that list in a defined <div> section within the HTML page. Of course, as always, the devil is in the details, but hopefully the description above might provide a starting point.