[naranjo4]

Similar, but different, to the previous Java Collapsing Menus post, i'm working on developing a Navigation menu like the one on this website: http://portal.mytum.de/tum/index_html
(I do alright with CSS, but im a newbie to Javascript)

There, they use a combination of CSS styles ("collapsed") with Javascript (my best effort is onclick scripting?). What i like that I havent been able to replicate is that the lists can all be expanded without changing the current page. I see when hovering, the link generated isnt the direct link, but once we click on the link, it becomes a normal short link.

These are the 2 javascripts I've combined so far plus an example list item to show the CSS. If needed, I can send a link to my working example. Thanks for any ideas!

JavascriptS

<script type="text/javascript">
<!--

function show(inp,inp2){
if (document.all[inp].style.display == "block"){
	document.all[inp].style.display = "none";
	}
else {
	document.all[inp].style.display =  "block";
	}
}
//-->

/* All of the following paramater are none mandatory*/
//mm_maxLevels=0;		 // parameter [INTEGER] to fix the number of menus displayed to the specified maximum value.
resetAutoOpen=true	  // parameter This bit allows the menu to re-open if sibling menus have been closed, displaying the menu again if required.
forceChildSubOpen=true  // Forces the opening of a child sub menu if the opening item's URL matches the current page URL and also opens a sub menu

function _ocURL(){
	var i,I,c;
	_cip=new Array();
	for(_b=0;_b<_mi.length;_b++)$q(_b)
	
	if(_W.forceChildSubOpen){
		_cln=_cip.length
		for(c=0;c<_cln;c++){
			if(_mi[_cip[c]][3]){
				_mn=$h(_mi[_cip[c]][3])
				_cip[_cip.length]=_m[_mn][0][0]
			}
		}
	}
	
	_ombcu=new Array()	
	if(_cip.length>0){
		for(c=0;c<_cip.length;c++){
			_ci=_cip[c];
			_mni=$f(_ci);
			if(_mni==-1)_mni=_ci
			if(_mni+" "!=$u){
				while(_mni!=-1){
					_ombcu[_ombcu.length]=_mni
					_mni=$f(_mni);
					if(_mni+" "==$u)_mni=-1					
				}
			}
		}
	}
	
	if(_startM){
		setTimeout("_ocURL()", 50)
	}
	else{
		if(_W._lnk&&_lnk!=_jv)return false
		if(_ombcu.length&&(_W.mm_maxLevels>0||_W.mm_maxLevels+" "==$u)){
			for(_oma=_ombcu.length-1;_oma>-1;_oma--){
				i=_ombcu[_oma];
				I=_mi[i];
				h$(i);
				hidetip();
				var M=_m[$h(I[3])]
				if(!M[7])$K(i);
				_ofMT=1;
				if(I[32]){
					_tI=$c("img"+i)
					if(_tI&&I[29])_tI.src=I[29]
				}
				if(_oma==_W.mm_maxLevels)return
			}
		}
		if(_ombcu.length){
			  d$(_ombcu[0])
			  hmL(_mi[_ombcu[0]][0])
		  }
	}
}
_ocURL()


</script>

HTML W/CSS (so far, i manually change "display:none" to :inline on the current page)

 <!-- START MAIN LEFT NAV DEFINITIONS -->
 <dl id="menu">
		<dt onclick="show('lo','loi');"><a href="#">First Menu Item</a></dt>
			<dd id="smenu1">
				<ul style="display:none" id="lo">
					<li><a href="#">sub-menu 1.1</a></li>
					<li><a href="#">sub-menu 1.2</a></li>
					<li><a href="#">sub-menu 1.3</a></li>
				</ul>
			</dd>

[William_Wilson]

There is an example in the snippets:
http://www.dreaminco.../snippet992.htm

It simply changes the display type from none to block when expanded, thus allowing it to appear over top of the other items on the page.

[naranjo4]

So i'm playing around with the sample snippet, but am struggling to get it how i want. It's as if i want several "Member Panel" list items, each able to expand. And when the sub-level links appear, i dont want them to cover up the other Main-level links, rather push them down. AND be able to expand other links in the same nav list at the same time.

Does that make sense? Its just like in the german site i named in the original post.

[ahmad_511]

Hi
Actually I wrote a snippet that can do this for you (Fold Menu),
But I modified it today to work on IE + FF. I rename it to (Expanding Menu)
Anyway I think Fold Menu was a stupid name to define a snippet..
So it may take a few days before it get approved (as the old one did).
Any way I'll try to explain to you how I did it:
1- Create a table and insert some rows and style it as you like.
2- Go and select a row (or more) you want to become your menu title/titles,
Change its style to something looks good to you.
3-In menu titles you selected add id to its TR tag and assign it "Menu" as a value

<tr id="Menu">
<td>
This is my menu title #1
</td>
</tr>

Repeat this step for all title rows in your table
4- Assign id to your table, let's say "MyMenu"
5- Do a loop to get each tr element in the table using its id
Read the id for each tr,if it equals to "Menu" change the display property to "block" else change it to "none" and that should hide all Menu-Elements rows giving the chance to other rows gets its places
When the id equals to "Menu" we will add click event function.
Click function will loop over the tr elements starting by clicked row+1 until the last row and set display property to "none" if the row's display property was "block" and vise versa.
When the loop reaches the next Menu it'll breaks and exit the function.

rows= MyMenu.getElementsByTagName("tr")
for(i=0;i<= MyMenu.rows.length-1;i++){
ismenu=rows[i].getAttribute("id")
if(ismenu=="Menu"){rows[i].style.display="block";} else rows[i].style.display="none" 
	if (ismenu=="Menu"){
	
		rows[i].onclick=function(){
		
			rows= MyMenu.getElementsByTagName("tr")
			
			for(t=this.rowIndex+1;t<=rows.length-1;t++){
			ismenu=rows[t].getAttribute("id")
			if(ismenu=="Menu")break
			OC=rows[t].style.display
			if (OC=="none"){OC="block";}else{OC="none";}
			rows[t].style.display=OC
			}
		}
	}
}

This is the principal idea to this, but it'll need more things to do with styles and maybe the way you want to display it.
I Hope this is what you're looking for.
Regards