PDA

View Full Version : Populating a dropdown menu using JS



wbnc
Sep 14th, 2007, 07:10 PM
I am working on a website that has many sub pages, and I need to create a drop down menu (actually menus). Anyway, I came up with some code to make the menu visible when you hover over the button. The menu itself is nothing more than an html table that I make visible or hidden using Javascript and CSS. Well this is a problem as there are 30+ pages to this site and
putting all the navigation menu information (the links) on each page is a bad idea. So I am trying to figure out how I can keep all the javascript and navigation links in one separate file.

I have no idea how to begin. I was thinking the best way would be to put the links into an array, and use some sort of while loop to populate the menu when the user hovers over the button. The problems I have faced to this point are:
Arrays do not seem to accept html links (i.e. <a href...), and each time the user hovers over the button the table appends the new links to the old links instead of over writing the old stuff. So it looks like this the first time the user hovers over the menu button (which is ok):

1. Link 1
2. Link 2
3. Link 3

But when the user moves away from the button and comes back it now looks like this:
1. Link 1
2. Link 2
3. Link 3
1. Link 1
2. Link 2
3. Link 3

Here is the code I was using (which I do not think is what I want):

script type="text/javascript">
var t1array = new Array(5);
t1array[0] = "aaaa";
t1array[1] = "bbbb";
t1array[2] = "ccc";
t1array[3] = "ddd";
t1array[4] = "eee";

function hide() {
document.getElementById("atable").style.visibility="hidden";
}

function show() {
var n = 0;
var mytable=document.getElementById("atable");
for (var i=0; i<5; i++){
var newrow=mytable.insertRow(-1)
var newcell=newrow.insertCell(0)
newcell.innerHTML=t1array[n]
n++;
}
document.getElementById("atable").style.visibility="visible";
}
</script>

Below is what you find in the doc body:

<input type="button" onmouseover="show()" onmouseout="hide()" />
<table id="atable" border="1" cellspacing="1" width="200">
<tbody>

</tbody></table><br>
</td>
</body>
</html>

Suggestions?

wbnc
Sep 14th, 2007, 07:45 PM
ok I have figured out how to populate the menus without having them repeat each time the user hovers over, leaves, and comes back. It is pretty simple, just use the <body onload=".."> function to fill in the menus when the page is loaded. Duh!

Anyway, does anyone have any idea how to put a url into an array where the output would be a clickable link?

wbnc
Sep 14th, 2007, 08:38 PM
Apparently posting questions up here helps me to answer my own questions. I figured it out. In case anyone was wondering here is the code that works for doing this with drop down menus.



<html>
<head>
<title>Drop Down Menu Test</title>
<script type="text/javascript">
var t1url = new Array(5); //create an array with the URL's of where you want to go
t1url[0] = "http://www.yahoo.com";
t1url[1] = "http://www.google.com";
t1url[2] = "http://www.yahoo.com";
t1url[3] = "http://www.google.com";
t1url[4] = "http://www.yahoo.com";
var t1names = new Array(5); // create an array with the names of the pages you want to link to
t1names[0] = "Yahoo!";
t1names[1] = "Google";
t1names[2] = "Yahoo!";
t1names[3] = "Google";
t1names[4] = "Yahoo!";

<!-- This function gets loaded by the onload function in the html body. What it does is take the values in arrays and puts them into a table in the document.-->
function populate() {
var n = 0;
var mytable=document.getElementById("atable"); //the name of the table in the doc body
for (var i=0; i<5; i++){
var newrow=mytable.insertRow(-1)
var newcell=newrow.insertCell(0)
<!--the following line puts the HTML link tags (i.e. <a href="...">) into the table cell combined with the URL found above. The result is a Hyperliked piece of text. i.e. the name of the site you want to go to. -->
newcell.innerHTML="<a href=" + t1url[n] + "/>" + t1names[n] + "</a>"
n++;
}
}
<!--The following functions hide() and show() make the table or in this case drop down menu visible when the user hovers over the button-->
function hide() {
document.getElementById("atable").style.visibility="hidden";
}
function show() {
document.getElementById("atable").style.visibility="visible";
}
</script>
<style type="text/css">
<!--
#atable {
visibility: hidden;
position: absolute;
top: 30px;
}
-->
</style>
</head>

<body onload="populate()">
<input type="button" value="button" onmouseover="show()" onmouseout="hide()"/> <!-- shows the menu when you hover over, hides it when you leave-->
<table id="atable" border="1" cellspacing="1" width="200" onmouseover="show()" onmouseout="hide()"><!-- shows the menu when you hover over, hides it when you leave-->
<tbody> </tbody></table><br>

</body>
</html>