[Home] [Hosting] [Web Design] [Webmasters Area] [Custom Graphics]

Tree Outlines (IE Only)

First thing to note. This is a very easy way to create a "tree" menu, but it is not functional in NN. Be sure if you use it, to provide a separate page, without IE only components for your visitors. 

Our site navigation has changed since this tutorial was written, not all links are the same as in this tutorial. Please see the left shared border for correct links.

Create your list, including the heading as the first item.

Now, highlight all of the links, but not the heading, and click the indent button (on your tool bar) twice.

This is now what you have.
It's beginning to look like it may turn into a collapsible tree, isn't it?

Now we can use FP features to create our IE only collapsible menu.

Right Click on the list heading, in our example FrontPage Tutorials. Choose List Properties.
At this point it is important to remember. One step at a time! Don't try to skip steps, you will be quickly disappointed.


Click to view larger version of image.

Check the box in the lower left corner, "Enable Collapsible Outlines." This will activate the other box, "Initially Collapsed," check it also.

I like to underline the text on my heading, just to make sure visitors realize it will lead to more. (The underline is the universal indicator for a link on the net.)

Well, you have a collapsible list, just that quick and easy! Preview your page with the preview tab to see it working!

If you prefer not to have the bullet on your heading, take these steps. Again, don't get into a hurry. (Remember though, many elements will not view just right with the preview tab.)

Right Click on your heading again. This time choose List Item Properties.
Click on the Style button.
When the next dialog box pops up, click the Format button.
Select Numbering.
Click on the Plain Bullets tab.
You will now see the same 4 bullet options as you did when you first chose List Item Properties.
Select the pane without bullets.
Click OK, on all of the open dialog boxes.

Don't take shortcuts, doing it this way tells the HTML of your page Where and How to place the tags for no bullet. Cutting out the steps will, not might or can, it will "break" your collapsible menu.

You might think about keeping the bullet on your heading, a tiny tree, or folder would be excellent images to use.