Top Menu

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(); .">
<div id="webpage">
           <! start of #header div>
           <div id="header">
           <header stuff goes here>
           <! start of #top bar div >
           <div id="tbar">
                    <div id="myTbar" class="insetTbar">
                    <! topMenu loads here >

Unfortunately, much of the functionality associated with the display of the top menu resides in CSS style declarations, which would be excessive to reproduce in detail. However, a Google search using 'CSS drop-down menu' will allow you access any number of sites that provide a much fuller account of the many options and styles on offer. Therefore, we shall turn our focus on the javascript code that exists in an external file that has to be declared in the <head> section of every HTML file:

<script src="/scripts/top/top.js" type="text/javascript"></script>

// External javascript file: top.js
function topMenu()
// this statement links to the <div id="tbar"> in the HTML above
var tbarDiv=document.getElementById('myTbar')
// code builds the string (str) that will be displayed at bottom
str = '<div id="menu">'
// String consists of a HTML nested list
str +='<ul>'
str += '<li><a class="topMenu" href="/html/1.Home.html">1:Website1 &rArr;</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.