How to create a dynamic navigation bar using simple scripti

[iGuest 3]

This short, but consise tutorial presents how to create a dynamic navigation bar using simple scripting verses using an image roll-over script.

Using text instead of images offers 3 benefits while sacrificing only a little in design. The end resault is a navigation bar that looks great, dosen't bog the server down with images, loads fast, and is search engine friendly. In addition, you save time by not having to design two images for every link required.

Using simple combination of Html, CSS, and Javascript we are able to create links in which both the color of the link and the background of the table data cell change when the user interacts with the link.

To accomplish a text roll-over navbar there are three sections to the script

The first step is to write a CSS script to control the link's color, font, size, and decloration.
Here it is:
Change the property values to match your site and place this code in the head tags of your document.

<style type="text/css"><!-- a:link {color: #FFFFFF; font: arial; font-size: 13pt; text-decoration: none}a:visited {color: #FFFFFF; font: arial; font-size: 13pt; text-decoration: none}a:hover {color: #FFFFFF; font: arial; font-size: 13pt; text-decoration: none}a:active {color: #FFFFFF; font: arial; font-size: 13pt; text-decoration: none}--></style>

The "a:link" controls the link when the mouse is out.
The "a:visited" controls the link once it has been clicked.
The "a:hover" controls the link when the mouse is hovering over the link.
The "a:active" controls the link when the link has been clicked.

You will notice that you can control each property of the link in each phase.

The second step is to control the background color of the data cell the link is in. To do this we will need to place two variables inside of a script tag and place it in the head tag of the document as well.

Here it is:

Change the background variables to match your color scheme and place this code in the head tag of your document.

<script language=""><!-- {var colorchange='#009C00';var colorback='#074605';}--></script>

The "colorchange" variable is set to the color we want the background color of the data cell to change to when the mouse is hovering over the link.

The "colorback" variable is the color of the background color of the data cell when the mouse is out. This must be the same as the bgcolor property value of the data cell the link is in.


The third step is to create the table with data cells for our links:

Here is the code:
Change the property values to match your site and place this code where you want your navbar to appear on your site. Remeber that the bgcolor property in the data cell and the "colorback" variable have to be the same.

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#009966"><tr><td width="10%" height="20" id="link1" bgcolor="#074605" align="center" valign="middle"><a href="http://example.com/" target="_blank" onmouseover="{link1.style.backgroundColor=colorchange};"onmouseout="{link1.style.backgroundColor=colorback};">link 1</a></td></tr><tr><td width="10%" height="20" id="link2" bgcolor="#074605" align="center" valign="middle"><a href="http://example2.com/" target="_blank" onmouseover="{link2.style.backgroundColor=colorchange};"onmouseout="{link2.style.backgroundColor=colorback};">link 2</a></td></tr></table>

Also notice that the "id" property changes with each link. You can put the actual name of the link here if you desire so long as each "id" is different. You can add as many links as you want. The above code is for a vertical navbar, but you can go horizontal as well.

In the above example the target is set to open a new window, if you want the page to open in the same window change the target property to target="_top"

I hope this script will be useful to you. It is not as hard as it may seem.

The following code was design for a frame site. I changed to tables and dynamic pages. And then to a pull down menu in the head nav bar.

This code, however, will provide an example.

<html><!-- Creation date: 11/8/2004 --><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title></title><meta name="description" content=""><meta name="keywords" content=""><meta name="author" content="Peter Bolduc"><meta name="generator" content="AceHTML 5 Pro"><style type="text/css"><!-- a:link {color: #FFFFFF; text-decoration: none}a:visited {color: #FFFFFF; text-decoration: none}a:hover {color: #99FFFF; text-decoration: none}a:active {color: #660000; text-decoration: none}--></style><script language="JavaScript">var message="Copyright 2004 RuidosoToday.comnALL RIGHTS ARE RESERVEDnContact Us for use privilage information."; function click(e) {if (document.all) {if(event.button == 2) {alert(message);return false;}}if (document.layers) {if (e.which == 3) {alert(message);return false;}}}if (document.layers) {document.captureEvents(Event.MOUSEDOWN);}document.onmousedown=click;// --></script><script>var colorchange='#009966';var colorback='#95bfa7';</script><script language=""><!-- Script Beginfunction aboutRuidoso() {var adBar = ('../adBars/aboutRuidoso_adbar.html')parent.Index_adBar.location.href=adBar}//  Script End --></script></head><body bgcolor="#000000"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#009966">	<tr>  <td  width="10%" id="link1" bgcolor="#95BFA7" align="center" valign="middle" title="Learn About Ruidoso... Historical, Geographical, Cultural, and Relocation Information including Maps of the Area.">  <a href="../aboutRuidoso/index.html" target="mainContent" onmouseover="{link1.style.backgroundColor=colorchange};"onmouseout="{link1.style.backgroundColor=colorback};"onclick="aboutRuidoso()"><font face="Arial" size="1">        About Ruidoso  </font></a></td>	    <td width="10%" height=" " id="link10" bgcolor="#95bfa7" align="center" valign="middle" title="Local news and information concerning the day to day life on Ruidoso.">  <a href="../hiking/index.html" target="mainContent" onmouseover="{link10.style.backgroundColor=colorchange};"onmouseout="{link10.style.backgroundColor=colorback};"><font face="Arial" size="1">       Local News  </font></a></td>      <td width="10%" height=" " id="link2" bgcolor="#95bfa7" align="center" valign="middle"title="Listing and contact information of the area's Government and its various departments."><a href="../governments/index.html" target="mainContent" onmouseover="{link2.style.backgroundColor=colorchange};"onmouseout="{link2.style.backgroundColor=colorback};"><font face="Arial" size="1">        Governments  </font></a></td>  	  <td width="10%" id="link3" bgcolor="#95bfa7" align="center" valign="middle" title="Contact information and happenings on the Apache/Mescalero Indian Reservation.">  <a href="" target="mainContent" onmouseover="{link3.style.backgroundColor=colorchange};"onmouseout="{link3.style.backgroundColor=colorback};"><font face="Arial" size="1">       Indian Affairs  </font></a></td>      <td width="10%" height=" " id="link4" bgcolor="#95bfa7" align="center" valign="middle" title="Contact and other information concerning the Lincoln National Forest.">  <a href="../nationalForests/index.html" target="mainContent" onmouseover="{link4.style.backgroundColor=colorchange};"onmouseout="{link4.style.backgroundColor=colorback};"><font face="Arial" size="1">        National Forests  </font></a></td>    <td width="10%" height=" " id="link5" bgcolor="#95bfa7" align="center" valign="middle"title="Contact and other information concerning possible forest fires in the the Lincoln and other National Forests.">  <a href="" target="mainContent" onmouseover="{link5.style.backgroundColor=colorchange};"onmouseout="{link5.style.backgroundColor=colorback};"><font face="Arial" size="1">         Fire Report  </font></a></td>    <td width="10%" height=" " id="link6" bgcolor="#95bfa7" align="center" valign="middle" title="Get the Local forcast.">  <a href="" target="mainContent" onmouseover="{link6.style.backgroundColor=colorchange};"onmouseout="{link6.style.backgroundColor=colorback};"><font face="Arial" size="1"><!--  --> Weather  </font></a></td>    <td width="10%" height=" " id="link7" bgcolor="#95bfa7" align="center" valign="middle" title="Contact and other information concerning area road conditions including updates of the Highway 70 construction project.">  <a href="" target="mainContent" onmouseover="{link7.style.backgroundColor=colorchange};"onmouseout="{link7.style.backgroundColor=colorback};"><font face="Arial" size="1">        Road Conditions  </font></a></td>    <td width="10%" height=" " id="link8" bgcolor="#95bfa7" align="center" valign="middle" title="A variety of area maps including city, county, state, national forests and others.">  <a href="../fishing/index.html" target="mainContent" onmouseover="{link8.style.backgroundColor=colorchange};" onmouseout="{link8.style.backgroundColor=colorback};"><font face="Arial" size="1">        Area Maps  </font></a></td>  <td width="10%" height=" " id="link9" bgcolor="#95bfa7" align="center" valign="middle"title"Information concerning what to do if you encounter a bear.">  <a href="../alerts/bear/bear_alert.html" target="mainContent" onmouseover="{link9.style.backgroundColor=colorchange};"onmouseout="{link9.style.backgroundColor=colorback};" onclick="window.focus()"><font face="Arial" size="1">       Bear Alert  </font></a></td>  	</tr><!-- =========================================================================================== -->		<tr>  <td width="10%" height=" " id="link11" bgcolor="#95bfa7" align="center" valign="middle">  <a href="../eventCalender/index.html" target="mainContent" onmouseover="{link11.style.backgroundColor=colorchange};"onmouseout="{link11.style.backgroundColor=colorback};"><font face="Arial" size="1">        Event Calender  </font></a></td>    <td width="10%" height=" " id="link12" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link12.style.backgroundColor=colorchange};"onmouseout="{link12.style.backgroundColor=colorback};"><font face="Arial" size="1">        Area Attractions  </font></a></td>  <td width="10%" height=" " id="link13" bgcolor="#95bfa7" align="center" valign="middle">  <a href="../businessService/index.html" target="mainContent" onmouseover="{link13.style.backgroundColor=colorchange};"onmouseout="{link13.style.backgroundColor=colorback};" onclick="{parent.Index_adBar.location.href='http://forums.xisto.com/no_longer_exists/ face="Arial" size="1">        Local Business  </font></a></td>  <td width="10%" height=" " id="link14" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link14.style.backgroundColor=colorchange};"onmouseout="{link14.style.backgroundColor=colorback};"><font face="Arial" size="1">        Dining  </font></a></td>  <td width="10%" height=" " id="link15" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link15.style.backgroundColor=colorchange};"onmouseout="{link15.style.backgroundColor=colorback};"><font face="Arial" size="1">        Entertainment  </font></a></td>  <td width="10%" height=" " id="link16" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link16.style.backgroundColor=colorchange};"onmouseout="{link16.style.backgroundColor=colorback};"><font face="Arial" size="1">        Area Lodging  </font></a></td>  <td width="10%" height=" " id="link17" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link17.style.backgroundColor=colorchange};"onmouseout="{link17.style.backgroundColor=colorback};"><font face="Arial" size="1">        Real Estate  </font></a></td>  <td width="10%" height=" " id="link18" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link18.style.backgroundColor=colorchange};"onmouseout="{link18.style.backgroundColor=colorback};"><font face="Arial" size="1">        Construction  </font></a></td>  <td width="10%" height=" " id="link19" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link19.style.backgroundColor=colorchange};"onmouseout="{link19.style.backgroundColor=colorback};"><font face="Arial" size="1">        Associations  </font></a></td>  <td width="10%" height=" " id="link20" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link20.style.backgroundColor=colorchange};"onmouseout="{link20.style.backgroundColor=colorback};"><font face="Arial" size="1">        Classifieds  </font></a></td>	</tr>	<tr>  <td width="10%" height=" " id="link21" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link21.style.backgroundColor=colorchange};"onmouseout="{link21.style.backgroundColor=colorback};"><font face="Arial" size="1">        Hiking  </font></a></td>    <td width="10%" height=" " id="link22" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link22.style.backgroundColor=colorchange};"onmouseout="{link22.style.backgroundColor=colorback};"><font face="Arial" size="1">        Fishing  </font></a></td>  <td width="10%" height=" " id="link23" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link23.style.backgroundColor=colorchange};"onmouseout="{link23.style.backgroundColor=colorback};"><font face="Arial" size="1">        Hunting  </font></a></td>  <td width="10%" height=" " id="link24" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link24.style.backgroundColor=colorchange};"onmouseout="{link24.style.backgroundColor=colorback};"><font face="Arial" size="1">        Birding  </font></a></td>  <td width="10%" height=" " id="link25" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link25.style.backgroundColor=colorchange};"onmouseout="{link25.style.backgroundColor=colorback};"><font face="Arial" size="1">        Biking  </font></a></td>  <td width="10%" height=" " id="link26" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link26.style.backgroundColor=colorchange};"onmouseout="{link26.style.backgroundColor=colorback};"><font face="Arial" size="1">        Camping  </font></a></td>  <td width="10%" height=" " id="link27" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link27.style.backgroundColor=colorchange};"onmouseout="{link27.style.backgroundColor=colorback};"><font face="Arial" size="1">       Prospecting  </font></a></td>  <td width="10%" height=" " id="link28" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link28.style.backgroundColor=colorchange};"onmouseout="{link28.style.backgroundColor=colorback};"><font face="Arial" size="1">        Photography  </font></a></td>  <td width="10%" height=" " id="link29" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link29.style.backgroundColor=colorchange};"onmouseout="{link29.style.backgroundColor=colorback};"><font face="Arial" size="1">        Skiing  </font></a></td>  <td width="10%" height=" " id="link30" bgcolor="#95bfa7" align="center" valign="middle">  <a href="" target="mainContent" onmouseover="{link30.style.backgroundColor=colorchange};"onmouseout="{link30.style.backgroundColor=colorback};"><font face="Arial" size="1">        Golf  </font></a></td>	</tr></table></body></html>

pete 8)

[iGuest 3]

Thanks.Have an expample of it?

[iGuest 3]

 Thanks.
Have an expample of it?

See the original, newly edited post.

pete 8)

[iGuest 3]

can you provide live example please

[iGuest 3]

Pesently I have none on the net. As explained, I wrote the script for a specific purpose then elected to go a different route. I will, however, be using the script for the vertical navbar on that same site. I will update the post with a link once it is up.pete 8)