JavaScript menus

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:

Code:

---

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:

Code:

---

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

Here is the javascript that does this:

Code:

---

<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

Code:

---

<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

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 :D

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:

Code:

---

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

---

The rest is easy to work out.

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:D

Quote:

---

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:

Code:

---

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

---

Or something like that.

HD

But...

I know this works:

Code:

---

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

---

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

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