?
Solved

Simple Tree Menu

Posted on 2005-05-15
6
Medium Priority
?
1,175 Views
Last Modified: 2011-08-18
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
Comment
Question by:X-DAP
  • 2
  • 2
5 Comments
 
LVL 3

Expert Comment

by:hackman_3vilGuy
ID: 14006823
<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
 

Author Comment

by:X-DAP
ID: 14007058
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
 

Author Comment

by:X-DAP
ID: 14007097
And what I just noticed:
This is not continuable. But I need a tree with at least 10 main categories. - thx again
0
 
LVL 3

Accepted Solution

by:
hackman_3vilGuy earned 200 total points
ID: 14021414
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
 
LVL 17

Expert Comment

by:Cem Türk
ID: 15703516
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question