HTML

I want to explain the principles of this page, how I realized the menu and some generic HTML themes. This should and this will never become a reference for making HTML documents. If you are looking for a really good HTML, JavaScript, DOM documentation and you speak German please visit SELFHTML a very good and completely free documentation.

Content

Name Description
HTML documents What I have to insert into the documents to get the menu work
JavaScript Explains the JavaScript code to insert the menu in every document
Dynamic HTML The code to let the menu appear/disappear

The menu

The menu is a combination of dynamic HTML and JavaScript. It should work wiht Internet Explorer 4+ and Netscape 4+ and every browser that suports DOM (document object model).

HTML documents

I wanted the navigation to be simple and easy to maintain. When I create a new page I just need to insert one entry in one file and the menu will show correct on all the other pages too. I only have to insert some lines in my document.

The first line inserts the JavaScript code into the document, this code contains the function InsertMenu() and some other things which will be mentioned later. The second thing looks something like this:

...
<body>
<script type="text/javascript">
<!--
    InsertMenu();
//-->

</script>
...

Everything between <!-- ... --> means a comment and so older browsers that do not understand JavaScript will simply ignore it.

That is all you have to insert in every html file to enable the menu. Simple, isn't it? Well the big things lie in the file "menu.js". So lets take a closer look at it.

JavaScript

This is a very intelligent script that inserts the menu into the document and shows submenus where used. All files must be named "[menu]_[submenu]_[subsubmenu].html", where [menu] is the name of the menu, [submenu] the name of the submenu and [subsubmenu], you'll guess, the name of the subsubmenu. So for example the document Dynamic memory class member functions in the (C/C++)(Dynamic memory class) section will have the name "cpp_dynamem_func.html". Yes, you can give a descriptive name for every menu entry.

The JavaScript first gets the name of the current file with var thisFile = window.location.pathname;. Then the name is split into its menu parts by simply scanning the string and you get three variables named thisMenu, thisSubMenu and thisSubSubMenu.

The next step is to insert the menu. This is done by simply stepping an array that contains the descriptive name, the name of the menu and a possible submenu. So the array contains three entries for every menu entry.

var menu = new Array("Home", "home", null,
    "Cool downloads", "down", downloadsub,
    ...
    "What's new", "news", null);

So we have a menu entry that shows "Home", the file name is "homt.html" and it has no submenu. And the next menu entry shows as "Cool donwloads" the filename is "down.html" and it has a submenu that is stored in the array "downloadsub". The submenu has the same structure: descriptive name, menu name and subsubmenu. So you could go on infintely but I restricted it to subsubmenu. This one looks a bit different because there is no subsubsubmenu there are only two entries for every menu: a descriptive name and a filename.

The menu is simply written with document.write(...); which inserts HTML code at the current position so the document is created dynamic.

Dynamic HTML

To keep the menu on the left top and to scroll it to your view I used something called dynamic HTML. It enables you to change attributes of HTML elements after they are loaded. Sadly this is very poor implemented by different browsers, you have to write the code for every browser and even check the version of your browser. So thanks to the W3C (World Wide Web Consortium) and DOM (document object model) this will become easy in the future.

If you want to see the code simply take a look at my menu.js file. There is no documentation to keep the file small so I will give you some hints what you will find there.

At first you can see some global variables defining browser versions and supported features. Then there are some variables defining the menu (width, height, position, …). The first function named "DHTML_init()" simply checks what features are available. The "getElem(p1,p2,p3)" function is used to get an HTML element not depending on the browser. "showMenu" and "hideMenu" will show or hide the menu. The function "AnimateMenu" creates the animation effect by simply moving the window some pixels to the right or to the left. "menu" and "noMenu" will start the animation effect (if turned on) or simply show and hide the menu. "handleMove" and "MShandleMove" are handling mouse movement to show or hide the menu when the mouse coes close oleaves the border. "eventInit" is called to create the mouse handler and capture mouse movement. Well and what InsertMenu() does is discribed above.