|HTML documents||What I have to insert into the documents to get the menu work|
|Dynamic HTML||The code to let the menu appear/disappear|
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.
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.
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 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.
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.
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.
|Go to top of page|