Reset the menu

+ Level 1 Item 1

Level 1 Item 2

+ Level 1 Item 3

Level 1 Item 4

+ Level 1 Item 5

Level 1 Item 6

Level 1 Item 1

  • You can click an icon and the page stays put. Click on the page and it changes, but the menu stays in whatever configuration you have it set up to display.

  • If you expand an entire tree, then contract it at the root; then expand it again the children are still expanded as you left them. Just like a typical explorer-style folder tree.

  • Execution is FAST. This demo is running on a dual PIII-800 running CFMX 6.1 and mySQL. Each page in this demo is a real db record and is not cached... so the execution times you see below are for much more than this menu.

The code for this is very simple. If you remove the large number of comments from the code most of it will fit on one screen (if you have a big screen :-)

At the core, menu expansion and contraction is dictated by a single, persistent list variable whose contents are shown at the bottom left of the menu. In this case, a client variable is in use because

  1. Its simple: No locking is required on older CF versions

  2. Its persistent across visits. Set up your menu and come back tomorrow. It'll still be as you left it.

The persistent variable could also be converted to a session variable although you would lose the cross-visit persistence -- which may be desirable depending on your application. You can even use a cookie variable, although there is one cflocation setting you will have to convert to a cookie-aware, cfheader-based redirect.


For debugging purposes:

Execution Time: 94ms