2dwebdesign.com

FREE HTML TEMPLATES

A Simple Left Column Navigation Menu

This page features a simple left column navigation menu using JavaScript.

In this case, we're going to create a vertical menu with text links whose backgrounds change color when you run your mouse pointer over them.

The font style, size, color and text-decoration are the only features set in the STYLE section and to give us control over the link styles it is a good idea to create a special class for your navigation links. The syntax is simple ...

A.leftNav:Link
A.leftNav:Visited
A.leftNav:Hover

... where "leftNav" is the name of the specific class. You can call it whatever you want. Then, when you create your navigation menu, you include the class name like this:

STYLE Specifications

Here's the STYLE block. Copy it into the HEAD of your page.

The background colors of the buttons are set in the following code. To complete the creation of the menu, copy the code to the BODY of your page:

<SCRIPT type="text/javascript" language="JavaScript1.2">
<!-- HIDE FROM NON-JS BROWSER //

function mOvr(src,overColour){
	src.style.cursor = 'hand';
	src.bgColor = overColour;
}

function mOut(src,outColour){
	src.style.cursor = 'default';
	src.bgColor = outColour;
}

function mClick(src) {
	tagClicked = event.srcElement.tagName.toLowerCase()
	if(tagClicked=='td') src.children.tags('A')[0].click();

}

// END HIDING -->
</SCRIPT>

<tr>
				<td align="left" valign="top" bgcolor="#3366ff" width="100%" onClick="mClick(this);" onMouseout="mOut(this,'3366ff');" onMouseover="mOvr(this,'3399ff');"><a class="leftNav" href="http://www.2dwebdesign.com/design/designMenu.html">Design</td>
			</tr>
			
			
			<tr>
				<td align="left" valign="top" bgcolor="#3366ff" width="100%" onClick="mClick(this);" onMouseout="mOut(this,'3366ff');" onMouseover="mOvr(this,'3399ff');"><a class="leftNav" href="http://www.2dwebdesign.com/build/buildMenu.html">Build</td>
			</tr>
			
			
			<tr>
				<td align="left" valign="top" bgcolor="#3366ff" width="100%" onClick="mClick(this);" onMouseout="mOut(this,'3366ff');" onMouseover="mOvr(this,'3399ff');"><a class="leftNav" href="http://www.2dwebdesign.com/publish/publishMenu.html">Publish</td>
			</tr>		
			
			
			<tr>
				<td align="left" valign="top" bgcolor="#3366ff" width="100%" onClick="mClick(this);" onMouseout="mOut(this,'3366ff');" onMouseover="mOvr(this,'3399ff');"><a class="leftNav" href="http://www.2dwebdesign.com/promote/promoteMenu.html">Promote</td>
			</tr>
</TABLE>

Here's how it displays in your browser. Naturally, you can change the colors and fonts to suit yourself.