• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1179
  • Last Modified:

Simple Tree Menu

Hi everyone!
I want to make a simple tree menu, that I've seen often but failed to find the code for.  In Flash that's easy so I created it there to show you.
http://www.8ung.at/christoph.doebber/tree.swf 
It is meant to expand and collapse dependant on what you click (see swf), not like an explorer tree! And to be able to easily change it it should be usual HTML text and pics combined with a little javascript.

Thanks for helping

X-DAP
0
X-DAP
Asked:
X-DAP
  • 2
  • 2
1 Solution
 
hackman_3vilGuyCommented:
<HTML><HEAD></HEAD>

<script>
function menuonefun(){
menuone.style.display = "none";
if (menuone.style.display == "none"){
            menuone.style.display = "block";
      }
      else{
            menuone.style.display = "none";
      }
}


function menutwofun(){
menuone.style.display = "none";
if (menutwo.style.display == "none"){
            menutwo.style.display = "block";
      }
      else{
            menutwo.style.display = "none";
      }
}


</SCRIPT>
<BODY>
<DIV ID="menuitemone">
<A HREF="javascript:menuonefun();">Click me to open folder</A>
</DIV>
<DIV ID="menuone" STYLE="display: none;">
<A HREF="that.html">Click me</A><br>
<A HREF="that.html">Click me</A><BR>
<A HREF="that.html">Click me</A><BR>
<A HREF="that.html">Click me</A><BR>
</DIV>

<DIV ID="menuitemtwo">
<A HREF="javascript:menutwofun()">Click me to open folder</A>
</DIV>
<DIV ID="menutwo" STYLE="display: none;">
<A HREF="that.html">Click me</A><br>
<A HREF="that.html">Click me</A><BR>
<A HREF="that.html">Click me</A><BR>
<A HREF="that.html">Click me</A><BR>
</DIV>
</BODY></HTML>
0
 
X-DAPAuthor Commented:
First of all thank you very much - that is exactly what I needed. But there is one thing: If you expand 2 first and then open 1 both open and when you the click 2 both collapse or if you click 1 nothing happens. Is it possible to fix that? thx X-DAP
0
 
X-DAPAuthor Commented:
And what I just noticed:
This is not continuable. But I need a tree with at least 10 main categories. - thx again
0
 
hackman_3vilGuyCommented:
Use the following:


<script>
//Number of menu items
numofmenuitems=2;

//Call to open menu
function m_open(index)
{
closeAll();
document.getElementById("menu" + index).style.display = "block";
}

//Closes all menus first
function closeAll()
{
for(i=0;i<numofmenuitems;i++)
{
document.getElementById("menu" + i).style.display = "none";
}
}


</SCRIPT>
<BODY>
<DIV>
<A HREF="javascript:m_open(0);">Click me to open folder</A>
</DIV>
<DIV ID="menu0" STYLE="display: none;">
<A HREF="that.html">Click me</A><br>
<A HREF="that.html">Click me</A><BR>
<A HREF="that.html">Click me</A><BR>
<A HREF="that.html">Click me</A><BR>
</DIV>
<DIV>
<A HREF="javascript:m_open(1)">Click me to open folder</A>
</DIV>
<DIV ID="menu1" STYLE="display: none;">
<A HREF="that.html">Click me</A><br>
<A HREF="that.html">Click me</A><BR>
<A HREF="that.html">Click me</A><BR>
<A HREF="that.html">Click me</A><BR>
</DIV>
0
 
Cem TürkSenior Software EngineerCommented:
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.

I will leave the following recommendation for this question in the Cleanup topic area:
    Accept: hackman_3vilGuy

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

cem_turk
EE Cleanup Volunteer
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now