The HTML page code
The Starting Code
This js file we need to fill out for the menu. Once this is done the menu is ready. What does it contain? There is variable "canvascssclasshor", which holds the class name of the canvases (check the html code above). "uniqueidhor" is the unique id for this menu but the same in all canvases of the menu. The id's consist of the uniqueidhor part and a unique id for the particular menu bar like "home" or "contact". When the images for the bars are named they should contain this id like homenormal.png or homeover.png or homeclick.png. As you can see the images names contain the unique id plus the state, which is fixed as "normal", "over" and "click". All images should be png. Then we need to enter the image path, which is held by the "imgpathhor" variable. Then we enter the width and height of the images. If we have more than one menu, the variable names should be unique. Only one variable cannot be changed and that is "speedlog", which is the speed for the fading.
/ the class name of the canvas var canvascssclasshor = "munit"; // the common id of all canvases for the menu bars var uniqueidhor = "menuhor"; /* the path for the images. Image names are drawn from the canvas id from the unique part of the id. */ var imgpathhor = "images/"; // width and height of images var imgwidth = 150; var imgheight = 25; // setting the fade speed var speedlog = 50; var fmhor = new FillMenu (canvascssclasshor, uniqueidhor, imgpathhor, imgwidth, imgheight);
In the next section I will present the code, how the menu is set up.