JavaScript menus

[HairyDave]

Hi,

Does anybody have any good links to either how to implement smart expanding tree menus, or somewhere to get one from?

I have a menu that works as a tree structure - unfolding when you select a node - but I'd like to make it so that when a user selects a branch, only that branch is unfolded:

1 Menu 1
  - Menu 1.1
  - Menu 1.2
2 Menu 2
3 Menu 3

Then if someone clicked to navigate through Menu 2 it would immediately:

1 Menu 1
2 Menu 2
  - Menu 2.1
  - Menu 2.2
3 Menu 3

As you can see, the previously opened branch gets closed and the selected branch gets opened in its place.

Any help would be gratefully received.]

HD

[HairyDave]

Here is the javascript that does this:

<style>
<!--
#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--

//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(fold.gif)"
}
}
}

if (ie4||ns6)
document.onclick=checkcontained

//-->
</script>

and the HTML that displays it

<font face="Verdana">

<ul>
   <li id="foldheader">News</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.cnn.com">CNN</a></li>
      <li><a href="http://www.abcnews.com">ABC News</a></li>
      <li><a href="http://www.news.bbc.co.uk">BBC News</a></li>
   </ul>

   <li id="foldheader">Webmaster</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
      <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
      <li><a href="http://www.freewarejava.com">Freewarejava.com</a></li>
   </ul>

   <li id="foldheader">Nested Example</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.dynamicdrive.com">outer 1</a></li>
      <li><a href="http://www.dynamicdrive.com">outer 2</a></li>
      <li id="foldheader">Nested</li>
      <ul id="foldinglist" style="display:none" style=&{head};>
         <li><a href="http://www.dynamicdrive.com">nested 1</a></li>
         <li><a href="http://www.dynamicdrive.com">nested 2</a></li>
      </ul>
      <li><a href="http://www.dynamicdrive.com">outer 3</a></li>
      <li><a href="http://www.dynamicdrive.com">outer 4</a></li>
   </ul>
</ul>

</font>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

As you can see this is downloaded from www.dynamicdrive.com, but I'd like to alter it to do what my post says.

Thanks

HD

[CornedBee]

You get away with not using any semicolons?

And why don't you just throw away IE4 support (this browser sucks anyway) and just go with Moz5+ and IE5+, they don't require different code thanks to the DOM.

I've made a few things quite similar to this, but it requires time, and I'm getting paid by the hour

[CornedBee]

I recommend giving the list items and the lists ids that follow a pattern, like
<ul id="ul1">
<li><ul id="ul11">
</ul></li>
<li><ul id="ul12">
</ul></li>
<li><ul id="ul13">
</ul></li>
</ul>
<ul id="ul2">
<li><ul id="ul21">
</ul></li>
<li><ul id="ul22">
</ul></li>
</ul>
<ul id="ul2">
<li><ul id="ul31">
</ul></li>
<li><ul id="ul32">
</ul></li>
</ul>

Then you can say
hide("22");

with a hide function that looks like this:

function hide(number)
{
  var ob = document.getElementById("ul"+number);
  if(ob)
    ob.style.visibility = "hidden";
}

The rest is easy to work out.

[Jethro]

Just what l'm currently working on. Big thumbs up saves me asking about a differing version than the one l was planning using frames

[HairyDave]

Posted by CornedBee
You get away with not using any semicolons?

Yeah, javascript allows you to not use semicolons. This isn't my code, but I normally do use them - bit of a C programmer. You only have to use them when there's more than 1 line of code on a single line:

var docTitle = this.document.title; alert(docTitle)

Or something like that.

HD

[CornedBee]

But...

I know this works:

var str = "Hello"
 + ", World!";

Now how does the interpreter know if the statement ends or not?

[HairyDave]

I believe that it uses "automatic semicolon insertion".

If I remember, it attempts to make the longest possible products of "lines". When a token is found that is not a continuation of the previous "product" it shoves a semicolon on the end.

That, I think, is how it works.

HD