3 Replies - 4441 Views - Last Post: 20 December 2007 - 06:22 PM

#1 naranjo4   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 17-December 07

Expandable Nav Menu w/ JavaScript & CSS

Post icon  Posted 17 December 2007 - 07:40 AM

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!

<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();
	_ombcu=new Array()	
			if(_mni+" "!=$u){
					if(_mni+" "==$u)_mni=-1					
		setTimeout("_ocURL()", 50)
		if(_W._lnk&&_lnk!=_jv)return false
		if(_ombcu.length&&(_W.mm_maxLevels>0||_W.mm_maxLevels+" "==$u)){
				var M=_m[$h(I[3])]


HTML W/CSS (so far, i manually change "display:none" to :inline on the current page)
 <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>

Is This A Good Question/Topic? 0
  • +

Replies To: Expandable Nav Menu w/ JavaScript & CSS

#2 William_Wilson   User is offline

  • lost in compilation
  • member icon

Reputation: 207
  • View blog
  • Posts: 4,812
  • Joined: 23-December 05

Re: Expandable Nav Menu w/ JavaScript & CSS

Posted 17 December 2007 - 08:17 AM

There is an example in the snippets:

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.
Was This Post Helpful? 0
  • +
  • -

#3 naranjo4   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 17-December 07

Re: Expandable Nav Menu w/ JavaScript & CSS

Posted 18 December 2007 - 06:10 AM

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.
Was This Post Helpful? 0
  • +
  • -

#4 ahmad_511   User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Expandable Nav Menu w/ JavaScript & CSS

Posted 20 December 2007 - 06:22 PM

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">
This is my menu title #1

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++){
if(ismenu=="Menu"){rows[i].style.display="block";} else rows[i].style.display="none" 
	if (ismenu=="Menu"){
			rows= MyMenu.getElementsByTagName("tr")
			if (OC=="none"){OC="block";}else{OC="none";}

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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1