computergeek67
|
Show Hide MenuWhen we click on the link, javascript navigation function, with ID that should be shown, is called and the hidden part of the table is opened as submenu.
Let us get started with JavaScript function that we will place inside of head tags, together with css.
| Code: | <script type="text/javascript">
function change(id){
ID = document.getElementById(id);
if(ID.style.display == "")
ID.style.display = "none";
else
ID.style.display = "";
}
</script> |
Function has an incoming value Id and by it this element is shown or hidden.
Layout of the menu will be controled with css.
| Code: | <style type="text/css">
BODY { text-align: center}
.tbl { FONT: NORMAL 11px/14px verdana, arial, sans-serif; border: 1px solid black; padding: 3px; Background: #F3F3F3; height: auto }
A {COLOR: #333333; TEXT-DECORATION: none; FONT-SIZE: 11px; font-weight: bold }
A:hover { COLOR: black; TEXT-DECORATION: none; FONT-SIZE: 11px; font-weight: bold}
</style> |
Next is the HTML code of the table that will be placed inside of body tags.
| Code: | <table width="220">
<tr>
<td title="Show/Hide" onclick="change(1)" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl" width="208" height="25">» <a onclick="change(1)" href="#">Link 1</a></td>
</tr>
<!-- Sub menu 1 -->
<tr style="display: none" id="1">
<td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
Sub 1</td>
</tr>
<tr>
<td title="Show/Hide" onclick="change(2)" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl" width="208" height="25">» <a onclick="change(2)" href="#">
Link 2</a></td>
</tr>
<!-- Sub menu 2 -->
<tr style="display: none" id="2">
<td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
Sub 2</td>
</tr>
<tr>
<td title="Show/Hide" onclick="change(3)" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl" width="208" height="25">»
<a href="#">Link</a><a onclick="change(3)" href="#">
</a><a href="#">3</a></td>
</tr>
<!-- Sub menu 3 -->
<tr style="display: none" id="3">
<td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
Sub 3</td>
</tr>
</table> |
As you see, next to the every menu title and ID tag we placed:
onclick="change(ID)"
which calls javascript function.
-toxiclab.org
|
