Now it's time to actually make the menu. It's all done at the bottom of the file "code.html" where the code reads "User-configurable menu". You want to delete all the code from there on down to </script> so you don't get any of my code clobbering up your stuff.
First off is the top-level menu. For this we use the global variable menu, like this:
var menu = null;
menu = new MTMenu();As Mike Hall writes on his page:
Note: We first set menu to null before making it a Menu. Netscape seems to have a problem with not cleaning up memory for script variables when a page is reloaded. By setting all the menu variables to null before use, we can force the space to be released, preventing the browser from crashing. Be sure to set all menu variables to null before use in your script!
Ok. Now we create each item in the menu using MTMenuItem(). You give MTMenuItem() one to four arguments. All menu items (links) have at least 3 of the options defined. A submenu can have the first option defined, or also 3 or 4. It depends on whether the submenu points to a URL or not. Here's teh four options:
text - the text to show on the menu list
URL - the URL for a link
target - the target frame/window of the link
icon - (optional) what image/icon to use for this item
With my menu the code then looks like this:
menu.MTMAddItem(new MTMenuItem("News", "menu/news.html", "text"));
menu.MTMAddItem(new MTMenuItem("Features etc.", "menu/features.html", "text"));
menu.MTMAddItem(new MTMenuItem("Supp. browsers", "menu/supported_browsers.html", "text"));
menu.MTMAddItem(new MTMenuItem("Why use it?", "menu/why_mine.html", "text"));
menu.MTMAddItem(new MTMenuItem("Download", "menu/download.html", "text"));
menu.MTMAddItem(new MTMenuItem("Install Guide", "menu/install-guide.html", "text"));
menu.MTMAddItem(new MTMenuItem("Support"));
menu.MTMAddItem(new MTMenuItem("Things learned", "menu/things.html", "text"));
menu.MTMAddItem(new MTMenuItem("How it works", "menu/details.html", "text"));
menu.MTMAddItem(new MTMenuItem("Morten's pages"));
menu.MTMAddItem(new MTMenuItem("M. Hall's pages"));
menu.MTMAddItem(new MTMenuItem("Home", "main.html", "text"));The first 5 items are regular items (links). The 6th item will actually be a submenu, but you can't see that yet. Later we will connect a submenu to this item, and then it'll show up as a submenu. The 7th item will also become a submenu. We can see that it's intended to become one since it doesn't have a URL. Then follows two more items, two submenus and a link back to the main page (home).
The main menu is now finished. You won't be able to test it yet to see how it looks & works, because no submenus are defined. Let's add a submenu, I'll show you how "Morten's pages" is added. we first create the actual menu, just like with the main menu:
var morten = null;
morten = new MTMenu();
morten.MTMAddItem(new MTMenuItem("Home page", "../", "_top"));
morten.MTMAddItem(new MTMenuItem("Who Am I?", "../me/", "_top"));
morten.MTMAddItem(new MTMenuItem("Backgammon", "../gammon/", "_top"));
morten.MTMAddItem(new MTMenuItem("Programming", "../programming/", "_top"));
morten.MTMAddItem(new MTMenuItem("Humour", "../jokes/", "_top"));
morten.MTMAddItem(new MTMenuItem("Guitar", "../guitar/", "_top"));
morten.MTMAddItem(new MTMenuItem("Other side", "http://www.geocities.com/~nettrom/", "_top"));As you can see we have defined 7 items with each its own link. All links will open in the full browser window because target is set to "_top". Now we will have to attach/connect this submenu to the main menu. This is done by referring to the item in the main menu that we want to attach the submenu to, and then use the method "MTMakeSubmenu()" to connect it:
menu.items[9].MTMakeSubmenu(morten);Each item in a menu can be referred to by using "menu_name.items[index]" where 'menu_name' is the name of the menu (the main menu is called simply "menu", the submenu is called "morten"). 'index' is the array index of the item. To find the index start with the first item and count from 0. "Morten's pages" is the 10th item, so its index is 9. We then use the method "MTMakeSubmenu()", give it the submenu as the parameter, and it's connected automagically.
If that was difficult to understand maybe you can try thinking it. I want the 10th item from 'menu' and connect 'morten' to it. It's not more complicated than that.
You can attach submenus to other submenus (in other words, nest submenus). That is done by connecting to the right submenu instead of the main menu. Simply replace 'menu' with the right name in the previous example, and it will be connected. The .zip-file available in the download area shows this feature. As an example, if I had a submenu called 'sub_menu' that I wanted to connect to the first item in "Morten's pages" it would be done like this:
morten.items[0].MTMakeSubmenu(sub_menu);Again, I'm thinking: Take the first item in the menu 'morten' and connect 'sub_menu' to it.
If you feel that this explanation of how the menu is made was difficult to understand you can also have a look at Mike Hall's tree menu page, he's got a slightly different way of explaining it.
Now that the menu is all set up you can continue on to checking the icon list where you'll be able to determine the icons used for the menu items.