PDA

View Full Version : 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


<!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/dynamicindex17/switchcontent.htm

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

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

laters
Rob