PDA

View Full Version : thinking ahead: contractable menu

mattover-matter
03-16-2003, 05:29 AM
I am pretty new to javascript, but I need a big script. I want contractable submenus. see my page at:
http://www20.brinkster.com/amplifieddesign/
notice the Submenu-header.gif? When u click on that, if the links below are seen, The links should fade out to disappear and then the other contents will animate up. Vise versa, if not seen. So far, I only got this:
<html>
<head>
<title>Mypage</title>
<style type='text/css'>
BODY {
BACKGROUND: #000000;
MARGIN: 0;
SCROLLBAR-BASE-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #1276CB;
font-family: Arial,Helvetica,Sans-Serif;
color: #4682FF;
}

a img {
border: 0;
}

A:link, A:visited, A:active {
COLOR: #7AABE0;
text-decoration: none;
font-size: 12px;
}

A:hover {
color: #CCCCCC;
}
</style>
<SCRIPT LANGUAGE="JavaScript">

function hide(a){

if(document.getElementById)

document.getElementById(a).style.visibility = 'hidden'

else if(document.all)

document.all.a.style.visibility = 'hidden'

}



function show(a){
if(document.getElementById)

document.getElementById(a).style.visibility = 'visible'

else if(document.all)

document.all.a.style.visibility = 'visible'

}

</SCRIPT>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="125"></td>
</tr>
<tr>
<td width="171" valign="top">
<table width="100%" cellspacing="0" cellpadding="0"background="images/Menu-Background.gif">
<tr><td>
<img src="Images/Menu-News.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</td></tr><tr><td bgcolor="#000000">
<img src="Images/Menu-End.gif">
</td>
</table>
</td>
<td valign="top">
<a href="javascript:hide('a')">Hide</a> <a href="javascript:show('a')">Show</a>

<div id="a">

Hi, this is the layer within layer within layer!

</div>


</td>
<td width="135" valign="top">
<table width="100%" cellspacing="0" cellpadding="0"background="images/Menu-Background.gif">
<tr><td>
<img src="Images/Menu-Headlines.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</div><img src="Images/SubMenu-Header.gif">
<div style="margin-left: 25px;">
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
<A HREF="">Submenu Element</A><br>
</td></tr><tr><td bgcolor="#000000">
<img src="Images/Menu-End.gif">
</td>
</table>
</td>
</tr>
</table>
</body>
</html>


that hides the text. but, I want to know if I am going in the right direction, and if you have any previous experiences with something like this or any tips please tell me. thank you
WA
03-16-2003, 07:37 AM
Hi:
As far as I can see, this thread is a continuation of the original, located here: http://www.codingforums.com/showthread.php?s=&threadid=16403 If so, in the future, please reply to the original thread in such cases in the future.

Thanks,