collapsable online directory (menu)

**Rob82** · 02-01-2006, 11:54 PM

hey guys

any help would be much appreciated

and go easy as i am new to javascript.

i am trying to make my online directory of the web dynamic http://directory.rieder.co.uk/ (ignore the content - desperately needs updating). i am thinking a list of categories which i can expand and collapse indendently and have sub categories that expand and collapse.

i looked at collapsable menus on dynamic drive and tried to modify some of them....

get an idea of what i mean - here is as far as i got:

http://www.rieder.co.uk/dynamicforum/testmenu.html

here is the code for that page

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style type="text/css">
body{
margin: 0px; 
FONT-FAMILY: verdana, arial, serif;
}

H1 {
PADDING-LEFT: 5px; 
FONT-WEIGHT: bold; 
FONT-SIZE: 12px; 
color: #FF9999; 
MARGIN-TOP: 0px; 
MARGIN-bottom: 0px; 
PADDING-TOP: 4px;  
PADDING-TOP: 1px;
}

.menutitle{
cursor:pointer;
margin-left: 0px;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 5px;
background-color:#cccccc;
color:#000000;
width:950px;
padding:2px;
FONT-SIZE: 17px;
text-align:left;
font-weight:normal;
/*/*/border:1px solid #000000;/* */
}

.submenutitle{
cursor:pointer;
margin-left: 20px;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 5px;
background-color:#cccccc;
color:#000000;
width:750px;
padding:2px;
FONT-SIZE: 12px;
text-align:left;
font-weight:normal;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
/*display: none;*/
}

A:link {
COLOR: black; 
TEXT-DECORATION: none; 
FONT-SIZE: 12px;
margin-left: 15px;
}
A:visited {
COLOR: black; 
TEXT-DECORATION: none
}
A:active {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline
}

UL {
MARGIN-LEFT: 15px; 
LIST-STYLE-TYPE: square; 
MARGIN-TOP: 0px; 
MARGIN-bottom: 10px; 
FONT-SIZE: 12px;
}

TD {
vertical-align:top;
MARGIN-TOP: 0px; 
PADDING-LEFT: 0px; 
FONT-WEIGHT: normal; 
color: #787878;
FONT-SIZE: 12px;
MARGIN-BOTTOM: 0px; 
PADDING-BOTTOM: 0px; 
PADDING-TOP: 0px; 
}
</style>


<script type="text/javascript">
/* 
if (document.getElementById){ 
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}*/

/*
function ExpandCollapse(obj){
	var element = document.getElementById(obj); 
		if(element.style.display = "block"){ 
			element.style.display = "none";
		}else{
			element.style.display = "block";
		}
}*/

function ExpandCollapse(obj){
	var element = document.getElementById(obj); 
		if(element.style.display = "block"){ 
			element.style.display = "none";
		}

}



</script>
</head>
<body>


<table border="0" cellpadding="0" cellspacing="0" summary="main" width="950" align="center">
<tr><td>





<div class="menutitle" onclick="ExpandCollapse('sub1')">Structural Engineering</div>
<span class="submenu" id="sub1">


		<a href="new.htm">What's New</a><br>
		<a href="hot.htm">What's hot</a><br>
		<a href="revised.htm">Revised Scripts</a><br>
		<a href="morezone/">More Zone</a>
    
    
    <div class="submenutitle" onclick="ExpandCollapse('sub2')">Consultancy Firms</div>
        <span class="submenu" id="sub2">
    	<a href="new.htm">What's New</a><br>
    	<a href="hot.htm">What's hot</a><br>
    	<a href="revised.htm">Revised Scripts</a><br>
    	<a href="morezone/">More Zone</a>
        </span>
	</span>

</td></tr>
</table>


















<br /><br />
<br /><br />


<table align="center" width="750" border="0" bordercolor="black" cellpadding="0" cellspacing="0"><tr>
<!-- ********************************************column 1************************************************** -->
<td width="250">
    <h1>My Sites</h1>
           <UL>
           <LI><A class=m href="http://www.rieder.co.uk" target="_blank" >rieder.co.uk</A></li>
           <LI><A class=m href="http://www.rieder.co.uk/cpanel" target="_blank" >rieder.co.uk</A> control panel</li>          
           <LI><A class=m href="http://people.bath.ac.uk/ab3raar/" target="_blank">Uni home page</A></li> 
           <LI><A class=m href="http://www.bath.ac.uk/ace/cplusplus" target="_blank">An Introduction to C++ for Engineers</A></li>
           </UL>
</td>
<td width="15">&nbsp;</td>
<!-- *******************************************column 2*************************************************** -->
<td  width="250">
    <h1>Banking</h1>
           <UL>
           <LI><A class=m href="http://www.ibank.barclays.co.uk" target="_blank">Barclay's</A></li> 
           <LI><A class=m href="http://www.barclaycard.co.uk/" target="_blank">Barclaycard</A></li>  
           </UL>  
   <h1>Email</h1>
           <UL>
           <LI><A class=m href="https://webmail.bath.ac.uk" target="_blank">Bath Uni Webmail</A></li> 
           </UL>             
</td>
<td width="15">&nbsp;</td>
<!-- *******************************************column 3*************************************************** -->
<td width="250">
<h1>?</h1>
           <UL>
           <LI><A class=m href="http://www.dynamicdrive.com/" target="_blank">Dynamic Drive</A></li> 
           <LI><A class=m href="http://www.acenet.co.uk/default.cfm" target="_blank">ACE net?</A></li>
           </UL>           
</td>
</tr>
</table>


</body>
</html>

NOTICE - that the menu items collapse but do not expand again. am i half way or what?!

Rob

**Rob82** · 02-02-2006, 07:44 PM

NOT to worry - i have gone and done it. i used the Switch content script

http://www.dynamicdrive.com/dynamici...tchcontent.htm

and muddled with it. check out my new directory - note content still under work

http://directory.rieder.co.uk/

laters
Rob

Thread: collapsable online directory (menu)

Thread Tools

Search Thread

collapsable online directory (menu)

sorted

Bookmarks

Bookmarks

Posting Permissions