Javascript Menus: Introduction

The Menus

I am showing how to make different kinds of javascript menues using the html5 canvas element. One type uses images, which have text, and the second type uses only images for the background but not for the text. The images are changed by fading in events. Shown below are horizontal and vertical menues using images with menu text. Only two menu bars are shown. Assuming this is the "Home" page, we can leave the "Home" button in the clicked state easily.









The horizontal menu is the same regarding the javascript and differs only in the css style sheet. So all explanations are true for both menues.

The HTML page code

We first write the HTML code as shown below and then create a style sheet. In the end we need to load javascript files in the head part, but that will be shown later. We name the stylesheet "imgstyle.css". For the menu we create canvases, which make the menu bars. We give a class name and a unique id, which has a common part, here "menuhor" and a unique part, which is usually hinting the link like "home" or "contact". We also add the width and height. If we want the menubars for the corresponding pages in the clicked state, we add 'name="idpage"', which we did here for the "home" page. I am not further going into the style sheet.

	<head>
	
	<!-- Style Sheet Code for menu -->
	<link rel="stylesheet" href="css/imgstyle.css" type="text/css">
	
	<!-- Javascript Code Library -->
	<script language="javascript" src="js_lib_flashcript/fading.js"></script>
	<script language="javascript" src="js_lib_flashcript/imgchange.js"></script>
	
	</head>
	
	<body>
    
    <!-- horizontal menu -->
    <div id="menuhorizontal">
    	<!-- each id should have a unique part and a common part in the beginning. -->
    	<a href=""><canvas class="munit" width=150 height=25 name="idpage" id="menuhorhome"> </canvas></a>
    	<a href=""><canvas class="munit" width=150 height=25 id="menuhorcontact"></canvas></a>
    </div>
    
    </body>
    

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.