Article:
 |
|
Hierarchical Menus with the Underrated style.display Object
|
| Subject: |
|
Complete code |
| Date: |
|
2005-06-29 01:36:22 |
| From: |
|
souljah
|
|
|
|
For those wanting to just rip into some working code here is mine.
It does not have the simplified hideall function included.
<body onLoad="javascript:hideAll();">
<script language="JavaScript">
<!--
var plusImg = new Image();
plusImg.src = "./imagessite/pluss.gif"
var minusImg = new Image();
minusImg.src = "./imagessite/minus.gif"
function hideLevel( _levelId, _imgId ) {
var thisLevel = document.getElementById( _levelId );
var thisImg = document.getElementById( _imgId );
thisLevel.style.display = "none";
thisImg.src = plusImg.src;
}
function hideAll() {
hideLevel("powerboats", "powerImg");
hideLevel("sailboats", "sailImg");
}
function showLevel( _levelId, _imgId ) {
var thisLevel = document.getElementById( _levelId );
var thisImg = document.getElementById( _imgId );
if ( thisLevel.style.display == "none") {
thisLevel.style.display = "block";
thisImg.src = minusImg.src;
}
else {
hideLevel( _levelId, _imgId);
}
}
// -->
</script>
<div>
<img id="powerImg" src="./imagessite/pluss.gif">
powerboats
<table id="powerboats" border="0">
<tr><td>Boat 1</td></tr>
<tr><td>Boat 2</td></tr>
<tr><td>Boat 3</td></tr>
</table>
<img id="sailImg" src="./imagessite/pluss.gif">
sailboats
<table id="sailboats" border="0">
<tr><td>Sail 1</td></tr>
<tr><td>Sail 2</td></tr>
<tr><td>Sail 3</td></tr>
</table>
</div>
|
Showing messages 1 through 2 of 2.
-
Complete code
2006-12-30 09:10:05
cbb2
[View]
-
Complete code
2006-03-28 06:29:56
dakey
[View]
I don't know Javascript at all, but I noticed then that there weren't any events like onclick or anything like that to make the menu actually work when the menu items are clicked. What exactly is needed to do this, and how do you add it to the code that is provided here?