Expanding Tree Menu

There are some sites have a tree structure menu. If you have used Windows at any time you may be familiar to this system. It use to be the default menu at the left when browsing files, and is the system that is used in the Registry Editor. We are going to use JavaScript and some CSS to create a similar effect.

For this tutorial we are going to work backwards then what we normally do. Let’s start by looking at the HTML we will be using since it is really simple, at least for now.

<ul>

<li>Home</li>

<li>Main Menu</li>

<ul>

<li>Page 1</li>

<li>Page 2</li>

</ul>

<li>Second Menu</li>

<ul>

<li>Page 1</li>

<li>Page 2</li>

</ul>

</ul>

So far the HTML is just an unordered list with three entries. Two of these entries have a sub-list. This will be the base of our menu.

Now lets take a look at the JavaScript. We are going to look at it in one big chunk but don’t worry about it. I will explain everything.

<script language=”JavaScript” type=”text/JavaScript”>

<!–

function toggle(id) {

 

var toggle_block = document.getElementById(id);

 

if(toggle_block.style.display == ‘block’){

toggle_block.style.display = ‘none’;

}else{

toggle_block.style.display = ‘block’;

}

}

//–>

</script>

So now that we have that over with, we can calm down a little because once I explain it, you will understand it a little better. The JavaScript has only one function. That function’s purpose is to toggle, hence the name, our menu selection. The first thing we do is assign a variable that is assigned to document.getElementById(id). The id will be passed to the function later on, just think of it as a place holder for right now. If you don’t know, the document.getElementById is object oriented programming. This is telling the Javascript that we want to select or use the element in the HTML (document) based on the id assigned to it. The next thing we come to in the JavaScript is and if else statement. The if else statement is checking to find the value of a CSS attribute. In this case the display attribute. To do this with JavaScript we added style.display to the toggle_block variable. You could use the long hand by typing in document.getElementById(id).style.display, but as you can see we use the document.getElementById(id) multiple times in the if else statement. This is why we made that a variable, it makes the code easier to read, and quicker to create. So if the if else statement detects that the element has the display attribute set to display, when this code is ran it sets the value to none, and vise versa. This will either show or hide the element, and you thought that setting the display attribute to none was only useful in forms. Well this is a way to make it useful.

Now that we have the JavaScript, explained. We have to make some changes to our HTML. The changes are very small, they are actually something that should be natural to all designers. We will be adding some classes and ids to our ul elements, and adding some JavaScript events to our main list. Here are the changes.

<ul class=”menu”>

<li class=”menu_none”>Home</li>

<li onclick=”toggle(‘submenu1’);”>Main Menu</li>

<ul id=”submenu1″ class=”submenu”>

<li>Link 1</li>

<li>Link 2</li>

</ul>

<li onclick=”toggle(‘submenu2’);”>Second Menu</li>

<ul class=”submenu” id=”submenu2″>

<li>Link 3</li>

<li>Link 4</li>

</ul>

</ul>

Okay, lets look at what we have done starting with the ids, and classes first. You see that we have the ul elements classes and ids. The classes are for the CSS we will be creating soon, and the ids will allow us to choose the element that the JavaScript effects. We added a class called menu to our main ul element. This is because it is our main menu. For all the other ul elements we added a class called sub-menu, and ids that start with sub-menu followed by a number. This number is based on how many sub-menus we have. If we added a third sub-menu, it will be submenu3, a forth would be submenu4, and so on.

In the main li elements that have a sub-menu we added a JavaScript event handler. There are multiple JavaScript event handlers, the one we are using is called onclick. To activate this event, you click on the element. Now this is where the JavaScript that we created actually works. We are telling the event handler that when it is clicked to pass the id to the toggle function. This is when the JavaScript checks the display attribute and changes it’s status.

If we were to just put the code together like it is right now, the code would not work when the page was first loaded. The reason is because our sub-menus are not hidden to start with. That is where our style sheet becomes important. We will also need to add something to the main menu in order for the user to know that there are sub-menus. We can do this with a + sign, but we don’t want to add a plus sign to any menu that doesn’t have a sub-menu. To do these two things we will create to classes. Here is the CSS code.

<style>

.menu {list-style: url(“plus.gif”);}

.menu_none {list-style: none;}

.submenu{display: none;

list-style: none;

}

</style>

The CSS is very simple for this example. If you wanted to make each sub-menu a different color to make it stand out a little, you can add that to the style sheet.

This code can be used for more then just a menu. Another way you can use this code is for a table of contents. Each sub-menu can have it’s own sub-menus. Adding the second level of sub-menus is very easy and allows the code to be scalable if needed. By using the code for a frequently asked questions page, it is really effective also. Each of the main menus can be a question or topic. Then each sub-menu can either be the answer or a question. If the sub-menus are questions a second level sub-menu can be added for answers. You can see the code in action here It shows examples of all three ways you can use the script as mentioned in this tutorial.

Leave a comment