Jump to content
xisto Community
saga

Creating Expanding Menu Tree In A Web Page sharing my knowledge

By saga, in Websites and Web Designing

Recommended Posts

saga    0

saga
Posted

hey guys...

im here to share some tricks i picked up along the way in creating or designing web pages...

this trick is making an expanding tree menu like the one you can find in the Windows Explorer.. very cool eh!

the trick is done by using javascript and some of its objects..

so here we go

 

 

Lets say for example you want to create this tree menu

 

Fruits

Apple

Small

Medium

Large

Grapes

With seeds

Seedless

Banana

Green

Yellow

 

and you want to make this menu collapse or expand when click

 

the first we do is encode this small code snipet which is in javascript. Put this in the head portion of your page.. its in between <HEAD>...</HEAD>

 

<script type="text/javascript" language="javascript1.3">

<!--

function closeall()

{

var divs=document.getElementsByTagName('div')

for(var i=0; i<divs.length; i++)

divs.style.display='none';

}

function clicked(element)

{

var div=document.getElementById(element)

if(div.style.display=='none')

div.style.display='block';

else

div.style.display='none';

return;

}

// -->

</script>

 

in the above code i need only to point out two functions..

the closeall() function.. collaps all menu tree in the page during the first time the page is loaded to the browser. Meaning the initial state in which all our tree menu including its sub-tree will be collapsed.

The second function, clicked(element), is responsible for collapsing a tree menu which is expanded already or expanding the tree menu if it is already collapsed. In clicked(element), the element here refers to the id of the <div> tag which we will being seeing soon.

 

So we are finnished with the javascripts. Lets proceed to the creating of the menus.

 

<a href="#" onclick="clicked('fruits')"> Fruit</a>

<div id="fruits">

<ul type="disc">

<li><a href="#" onclick="clicked('apple')">Apple</a></li>

<div id="apple">

<ul type="square">

<li>small</li>

<li>medium</li>

<li>large</li>

</ul>

</div>

<li><a href="#" onclick="clicked('grapes')">Grapes</a></li>

<div id="grapes">

<ul type="square">

<li>With seeds</li>

<li>Seedless</li>

</ul>

</div>

<li><a href="#" onclick="clicked('banana')">Banana</a></li>

<div id="banana">

<ul type="square">

<li>Green</li>

<li>Yellow</li>

</ul>

</div>

</ul>

</div>

 

lets take a closer look on our tree menu...

the <div id="fruit"> .. </div> encloses all the 3 sub-menu which are Apple, Grapes and Banana. Meaning if we call the function

clicked('fruit') (supplying the id of the <div> to collaps or expand to the function parameter) when clicking the link Fruit through the event handler property onclick="clicked('fruit')" the 3 sub-menu will collaps if it is expanded already or will expand if it is already collaps.

We then apply the same technique to each of the sub menu of Apple using again <div> but with diferent id <div id="apple"> .. </div> and making apple a link <a href="#" onclick="clicked('apple')">Apple</a> with this code. So we just made the sub-menu of apple collpasable.

Next we apply the same thing with Grapes and banana so we have a functional collpasable tree menu..

 

I hope i made my self very clear or maybe i just mess things up.

Im not good in explaining things in english, im from asia, thats why.

Anyway to see the technique in work... visit this page

http://forums.xisto.com/no_longer_exists/

 

if ever u have any questions about this..... just ask...

enjoy!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Share this post

Link to post
Share on other sites

moonwitch1405241479    0

moonwitch1405241479
Posted

I like that, but on hover is nicer :) (just personal preference)Also you can achieve the same effect with CSS, but saying CSS I mean CSS2, which then sadly also means that IE doesn't support it. It's all nested lists really, just like you did it, but then in the CSS you define li.hover or something (bad memory when I just get up)*mumbles something about lack of cofee and the need to write a tutorial*

Share this post

Link to post
Share on other sites

saga    0

saga
Posted

moonwitch... since u mentioned having the same effect using CSS2... can you post codes about it.. :) im interested even though it is not widely supported but sooner or later new version of browser will appaer on market supporting the CSS2.. im starting to use CSS so its a good to learn such technique... tanx in advance :P

Share this post

Link to post
Share on other sites

solankyno1    0

solankyno1
Posted

Thanks saga for sharing your knowledge on the forum. You have created the tree menu with a very simple code. Although HTML experts may find your code nothing but for beginners in HTML this type of things are very useful for creating the web pages in easy way.

Share this post

Link to post
Share on other sites

szupie    0

szupie
Posted

Nice script, but too bad I can't go to your site to see your test page :) . Do you have enough credits?

 

Did you code that yourself? I also have an expandable tree menu on my site, I coded it myself, but it's not as compact as yours (I've just began to learn the DOM). The list can expand to tell you your current location, and will turn into an ordinary list when the browser has JS disable or doesn't support it. You can check it out and see how I did it.

 

I one thing in your script that I want to know more about: How does the for function work? What is its syntax? Is it close to the while function (which I also don't know how it works)?

Share this post

Link to post
Share on other sites

patchcr    0

patchcr
Posted

szupie,

 

I don't know java very well but I can tell from my programming knowledge how the for statement works.

 

for(var i=0; i<divs.length; i++)

Above is the code from saga's javascript menu.

 

Basically what the for function does is loop until a predefined end is met. Yes it is similar to a while loop but much more powerful.

 

Inside the parentheses you see three statements:

1) var i=0

2) i<divs.length

3) i++

 

Statement #1 is run only once. When the for-loop is first entered, it initializes a variable "i" to the value 0. Next, statement #2 is evaluated. If the current value of "i" is less than the value stored in divs.length, then the body of the for-loop will run. In this case the body of the for-loop consists of the line directly below the for-statement:

 

divs.style.display='none';

When this operation is complete, statement #3 is run. Statement #3 simply increments "i" by 1. So, if it was 0 to start with, after statement #3 is run, "i" will equal exactly 1. Next, statement #2 is evaluated.

 

The loop continues to run in that sequence #2, body, #3, .... until statement #2 is no longer true, at which point the for loop exits and the code continues at the point after the last statement in the body of the for-loop.

 

-PatchCR

Share this post

Link to post
Share on other sites

jcguy    0

jcguy
Posted

I think that this Javascript menu tree very cool! It will be highly useful to a big website with lots of pages and content so that visitors can find their way around. I didn't know how to do this, so I had to manually do a sitemap, a simple HTML page, on my website.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept