FREE HTML TEMPLATES

Another Simple Top Navigation Menu

This page features a simple top navigation menu using JavaScript.

In this case, we're going to create a top menu with text links with the backgrounds changeing 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.topNav:link
• A.topNav:visited
• A.topNav: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:

<A href="http://www.2dwebdesign.com/index.html/" class="topNav">Home</a>

There is also a test for non-JavaScript browsers.

STYLE Specifications

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

<script type="text/javascript" language="JavaScript1.2"> <!-- HIDE FROM NON-JS BROWSER // var bName = navigator.appName var bVer = parseInt(navigator.appVersion) // END HIDING --> </script> <style type="text/css"> a.topnav {font: 9pt Verdana, sans-serif; color: #ffffff; text-decoration: none } a.topnav:hover {font: 9pt Verdana, sans-serif; color: #ffffff; text-decoration: none } </style>

The following code includes the links and should be copied into the BODY of your page:

<div align="center"> <!--// TOP NAV MOUSEOVER--> <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> <!-- TOP NAV FIRST ROW --> <table border="1" cellpadding="2" cellspacing="0" width="60%" align="center"> <tr align="center"> <!-- THE 1ST NAV BAR ITSELF : MOVING IN PAIRS - TEXT AND TOP HALF OF DIVIDER. ALSO SEE NEXT ROW FOR THE BOTTOM HALF OF THE DIVIDER --> <td rowspan="2" bgcolor="#0056ad" valign="middle" width="20%" onClick="mClick(this);" onMouseout="mOut(this,'0056ad');" onMouseover="mOvr(this,'7893D5');" nowrap><a class="topnav" href="http://www.2dwebdesign.com/index.html" onClick="mClick(this);">Home</a></td> <td rowspan="2" bgcolor="#0056ad" valign="middle" width="20%" onClick="mClick(this);" onMouseout="mOut(this,'0056ad');" onMouseover="mOvr(this,'7893D5');" nowrap><a class="topnav" href="http://www.2dwebdesign.com/tips/1designchecklist.html">Design</a></td> <td rowspan="2" bgcolor="#0056ad" valign="middle" width="20%" onClick="mClick(this);" onMouseout="mOut(this,'0056ad');" onMouseover="mOvr(this,'7893D5');" nowrap><a class="topnav" href="http://www.2dwebdesign.com/tips/2HTML.html">Build</a></td> <td rowspan="2" bgcolor="#0056ad" valign="middle" width="20%" onClick="mClick(this);" onMouseout="mOut(this,'0056ad');" onMouseover="mOvr(this,'7893D5');" nowrap><a class="topnav" href="http://www.2dwebdesign.com/tips/3usingFTP.html">Publish</a></td> <td rowspan="2" bgcolor="#0056ad" valign="middle" width="20%" onClick="mClick(this);" onMouseout="mOut(this,'0056ad');" onMouseover="mOvr(this,'7893D5');" nowrap><a class="topnav" href="http://www.2dwebdesign.com/tips/3linkpopularity.html">Promote</a></td> </tr> </table> <!-- END TOP NAV FIRST ROW --> </div>

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

Home

Design

Build

Publish

Promote