Javascript Menus: Text and Bar

The Text and Bar Menu

In the following menu the bars and the text are separated. The advantage is that we need only three images for the bar status. The text is created by HTML separately. We can create a number of text effects but in this example the color of the text is changed, when the mouse is over the bar.

Again we create canvases within a div element and give unique names. However here it is important that the names all have the same number of any letters. Later when the canvas id is analyzed in the for loop (see "FillMenu" function), the subid should be 0, since we need only the over, clicked and out (normal) images without any reference to the bar id. Within the div element we place the div element for the text, which is flanked by a p tag.

    	<!-- Style Sheet Code -->
		<link rel="stylesheet" href="css/canvasstyle.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>
	<!-- canvas menu -->
    <div id="menu">
    <!-- all elements should have an id of the same string length -->
    	<a href=""><canvas class="munit" width=150 height=25 name="idpage" id="melement0"></canvas></a>
    	<a href=""><canvas class="munit" width=150 height=25 id="melement1"></canvas></a>
    	<!-- text menu -->
    	<div id="menutext">
    		<div class="mtext"><p>HOME</p></div>
    		<div class="mtext"><p">CONTACT</p></div>
    <!-- specific JS for the menu -->
    <script language="javascript" src="src/canvasmenu.js"></script>

The CSS Code

We position the "#canvasmenu" element as relative and the "#menutext" as absolute. if we want to make a horizontal menu, we set the width as to how many bars we want to create. In case of a vertical menu the width is identical to one menu bar. Depending on the font and font size, we need to adjust the top position of "#menutext". That is all, what is to say about the css code.

/* positioning the menu for the canvases */
	position: relative;
	margin-left: 100px;
	width: 760px;
	height: 25px;
	background-color: #ffffff;

/* individual canvases */
	border: 1px solid #000000;
	float: left;

/* positioning the text for the menu, needs to be adjusted 
depending on the font and font size */
	top: 0;
	position: absolute;
	pointer-events: none;

/* individual text units */
	width: 152px; 
	float: left;
	color: #666666;
	text-align: center;

/* text: font and styles */
#menutext p
	white-space: nowrap;
	line-height: 0;
	font-family: "Impact";
	font-size: 24px;

Finally there is the JS code, we need to write by ourselves for the menu to work. We now use the two variables, "canvastxclass" and "colorover", which we did not use for the previous menu and which null by default. For "canvastxclass" we take any id, which has the same number of letters as the canvases ids. "colorover" is the color we want for mouseover.

// the class names of the bars 
var canvascssclass = "munit";
var canvastxclass = "munittext";

/* For this menu the string for uniqueid variable should have the same length as the id of the
elements but can be any string. Only the number is important. */
var uniqueid = "melementx";

// path/location for images
var imgpath = "images/";

// width and height of images
var imgwidth = 150;
var imgheight = 25;

// the textcolor for the hover status
var colorover = "#e74c3c";

// setting the fade speed
var speedlog = 50;

var fm = new FillMenu (canvascssclass, uniqueid, imgpath, imgwidth, imgheight, canvastxclass, colorover);


And this concludes the menu tutorial.