more menues

I use this on my site to make a drop down menu. But I want to have several drop downs for diffeent categories, how can I do that?

java script:

function toggleMenu() {
var oMenu = document.getElementById("item");
if(oMenu.style.display == "none")
oMenu.style.display = "block";
else
oMenu.style.display = "none";
}


html:

<ul>
<li onclick="toggleMenu();">Menu</li>
<li id="item" style="display:none;">
<ul>
<li><a href="http://www.site1.com">site1</a></li>
<li><a href="http://www.site2.com">site2</a></li>
</ul>
</li>
</ul>

 

function toggleMenu(menuName) {
var oMenu = document.getElementById(menuName);
...


<li onclick="toggleMenu('menu2');">Menu</li>
<li id="menu2" style="display:none;">

Code (markup):

basically you can pass a parameter with the listitem's ID to the toggleMenu function and you can reuse the function to create more menus

 

Hmm. I tried that before but didnt get that to work. I must have missed something. And does it not work on Firefox?

Would it require two .js files like this?

.js no1:
function toggleMenu(item1) {
var oMenu = document.getElementById("item1");
if(oMenu.style.display == "none")
oMenu.style.display = "block";
else
oMenu.style.display = "none";
}

.js no2:
function toggleMenu(item2) {
var oMenu = document.getElementById("item2");
if(oMenu.style.display == "none")
oMenu.style.display = "block";
else
oMenu.style.display = "none";
}


Then in the body:


<ul>
<li onclick="toggleMenu(item1);">Menu</li>
<li id="item1" style="display:none;">
<ul>
<li><a href="http://www.site1.com">site1</a></li>
<li><a href="http://www.site2.com">site2</a></li>
</ul>
</li>
</ul>

AND

<ul>
<li onclick="toggleMenu(item2);">Menu</li>
<li id="item2" style="display:none;">
<ul>
<li><a href="http://www.site3.com">site1</a></li>
<li><a href="http://www.site4.com">site2</a></li>
</ul>
</li>
</ul>

Or is function "menuName" in toggleMenu(menuName) a function that should be the same in all the .js files?