Cascading Floating Menu

Highly structured writing is a major part of online communication. Then, however, you have the problem of navigation: The reader should be able to jump from any point to any other. Still, that should not consume too much of the precious screen space. A cascading floating menu is a good solution to that dilemma.

Effective communication is not only getting across "everything" correctly, but also making sure the readers can get immediately to the information they are interested in. For communication on paper you just can provide every detail that might ever be interesting to a reader - ending up in a bulk of information that has a deterrent effect to potential readers. If they can, they will find an excuse why they "can't" read it.

In online communication, however, you have a much better way to do that: A cascading menu. That's nothing but a list of links to bookmarks. When clicking on such a list item, the document is automatically scrolled to the associated bookmark. To the reader that's looking just like "jumping" to the corresponding information.

Some of the list items are not a link to a bookmark but open up another list of links, a "sub-menu". That's why such a menu is called "cascading".

You can provide even more comfort to the reader: Make sure that just a tiny part of that cascading menu (the "Anchor") is permanently on screen. All the other parts are there only temporarily, when the reader moves the cursor onto the Anchor.

Then you have a Cascading Floating Menu. An example of it you have in the top-right corner of your screen.

"Highly structured writing" (see "Online Communication - unlike Writing on Paper ") means breaking down a subject into small pieces of information you can get across point for point.

Result: You are ending up with a great number of small pieces of information.

2 Problems:

How to make the reader understand their interrelations.
"Navigation": How to provide direct access to each detail.

Then you have a dilemma:

Good navigation = user-friendliness
But good navigation consumes much of the precious screen space.

Solution - Provide temporary navigation:

Don't set aside a part of the screen permanently,
let a menu of the section titles appear only when the user moves the cursor to a certain place ("anchor"),
make that anchor being floating (= always at the same position on screen, e.g. in the top-right corner),
use an anchor layout that is not too prominent for not to distract too much when reading the contents (e.g. use a transparent background)

=> Reflect the context by a cascading menu, guiding the reader from broader terms down to details.

As a standard, the identifier of the Anchor of a section menu is SectionMenuAnchor .

Whenever the reader moves the cursor into the Anchor, the browser generates a messages onMouseOver . When the cursor is moved out of the Anchor, a message onMouseOut is generated. In either case, function Toggle is called with the identifier SectionMenu as parameter (see section SectionMenu).

For making the Anchor unobtrusively reside on screen, it might be a good idea to add in place of … the following attribute:

By border:1px solid green; color:green the Anchor is marked by a green frame. If you decide to have a line of text in it, it will also be green.

BackStyle:0 makes the Anchor have a transparent background - I.e. it would not interfere when reading the document's contents.

menuWidth is a global variable that is automatically set to 200 when the document is loaded into the browser. If you are not satisfied with a menu width of 200 pixels, you can override that setting by the following code in front of coding the Anchor:

A "floating" menu is a menu that is loaded once, then it follows automatically whenever the reader scrolls the document or resizes the browser. To that end you need to provide in your HTML-file the following coding:

PlaceDiv(dx) is a function that places the SectionMenuAnchor into the top-right corner of the screen. Whatever the menuwidth , it is placed exactly dx pixels away from the right screen edge. If dx is omitted, 10 is assumed by default. If you have a big menu hierarchy with several levels of sub-menus, you might find it useful to have another distance to the right screen edge than 10 pixels.

ONLOAD=…, ONSCROLL=…, ONRESIZE=… is the coding to have function PlaceDiv called each time when the document is loaded for the first time, when the reader is scrolling or resizing.

… If you decide to have some more attributes in your <BODY> tag, you can code them here.

Embedded in the DIV of the SectionMenuAnchor you should provide the following coding:

SectionMenu Remember the parameter SectionMenu of function Toggle in the Anchor? Here you have its counter part.

STYLE="display:none" is needed for a menu that is normally hidden. By function Toggle it is displayed and hidden again later.

By position:absolute a sub-menu is virtually layed "on top" of the parent menu, the following items are covered. By position:relative , however, the sub-menu is pinched in between the parent menu, the following items are shifted up (and back again when the sub-menu is closed).

padding:20 determines the border that is left empty from text or sub-menus. 20 pixels is a good border width for most menus.

border:1px solid green makes the menu have a frame of a solid green line, 1 pixel thick.

If you want an item of the SectionMenu be a link to any bookmark or external destination , it should be coded like the following:

STYLE="color:green" makes the link text being written in green. That turned out to be useful for easy distinction from the menu items representing a sub-menu.

… link text … is the text being written in the menu, i.e. what's visible to the reader. This can be any HTML-code: plain text, decorated text, etc.

HREF="#" makes the <A>-tag being abused as a pseudo-link. A link that does not jump anywhere.

… link text … is the text of the menu item. To make items easily discernible, link items should be written in one color (e.g. green), items standing for a sub-menu in another color (e.g. blue).

cursor:default gives an additional hint to the reader: when the cursor is on a link item, it turns to a hand by default. On an item indicating a sub-menu it stays the default cursor (usually an arrow left-up).

It's user-friendlier to use something like different styles, font colors, etc. for a link item and an item opening a sub-menu. An item can even do both - opening a sub-menu and linking to a bookmark. Then, however, you should remove the style cursor:default for letting the reader see at first glance what to expect of that item.

… item text … is the text being written in the menu, i.e. what's visible to the reader. For a sub-item such a text should be a bit more telling than a link text. This can be any HTML-code: plain text, decorated text, etc.

OpenM(id_sub,…,…) is the function that launches the sub-menu with identifier id_sub.

x optional: x-coordinate of the menu or sub-menu to be opened. If it's a sub-menu (i.e. a DIV nested within a DIV) and it is declared as position:absolute the x -value refers to the top-left corner of the parent DIV (i.e. the SectionMenu ). If declared as position:relative, this value refers to the bottom-left corner of the corresponding item. If it is omitted, the menu or sub-menu is opened right beneath the line marked by OpenM . Default-value: 10. By a negative x you can have the sub-menu opened to the left of the parent menu.

y optional: y-coordinate of the menu or sub-menu to be opened. If it's a sub-menu (i.e. a DIV nested within a DIV) and it is declared as position:absolute the y -value refers to the top-left corner of the parent DIV (i.e. the SectionMenu ). If declared as position:relative, this value refers to the bottom-left corner of the corresponding item. If it is omitted, the menu or sub-menu is opened right beneath the line marked by OpenM . Default-value: 10. By a negative y you can have the sub-menu opened above the parent menu.

A submenu can be opened at any place, even to the left or above its parent menu. Just be sure that it is overlapping with its parent menu, or the reader will have no chance to move the cursor to it. When the cursor is moved out of the parent menu, it is closed - and any opened child menu along with it.

Note that the second optional parameter ( y ) may be omitted only if the first optional parameter ( x ) is set. Only both parameters together may be omitted.

If both x and y are omitted, the sub-menu is opened straight beneath the corresponding item, covering the following items. If the reader wants to access any of the following items, an additional cursor movement is needed for closing the sub-menu first. So, it's more user-friendly to have all sub-menus opened sideward of the parent menu's items. Then the reader just needs to move the cursor to another parent item - the first sub-menu is closed automatically and the next sub-menu is opened.

If you want to have a sub-menu to the section menu, embedded in the DIV of the SectionMenu you should provide the following coding:

…id… is the same identifier that you used as parameter when calling OpenM(id[,x[,y]])) . Note that the same parameter is used again when calling function CloseM(…) .

STYLE="display:none" is needed for a menu that is normally hidden. By function Toggle it is displayed and hidden again later.

position:absolute is needed for explicitly positioning the menu on screen. If you don't use the optional parameters x and y, you can omit this style.

padding:20 determines the border that is left empty from text or sub-menus. 20 pixels is a good border width for most menus.

border:1px solid green makes the menu have a frame of a solid green line, 1 pixel thick. If you have a great menu hierarchy, by this style you can make it easier for the reader to discern what belongs to the document and what is part of the menu.

Any number of sub-menus can be nested within a menu, at any nesting depth. Just be sure to carefully debug each sub-menu!

CloseM(id_sub) is the function that closes the [sub]menu with identifier id_sub when the reader moves the cursor out of it.

id is the identifier of the menu or sub-menu to be closed. This is the same identifier as in OpenM(id) and, if you want to provide help for debugging, in <SCRIPT>OnDebug ('id')</SCRIPT> .

Debug

It's a good idea to provide a line <SCRIPT>OnDebug ('…')</SCRIPT> before the first item of a menu or sub-menu. … should be the same name as in ID="…" . Thus,while in debug mode, you can have the name of each [sub]menu printed on screen and some other helpful messages while you work you way through the menu hierarchy.

If you have a great, complicated menu hierarchy, it is but too easy to lose overview of all the sub-menus. On the other hand, it would be hard for the readers to resume the thread if constantly interrupted by debug messages. - Therefore, don't forget to switch off debugging (or simply remove or comment out the code SetDebug(1) ) once you are finished!

For switching to debug mode, you need before the first coding of your menu hierarchy (i.e. the SectionMenuAnchor ) a line like the following:

<SCRIPT> SetDebug(1) </SCRIPT>

If you have > 1 menu in your HTML-file and you want to debug only one of them, you might want to switch off debug mode in between. You can do that by a line

<SCRIPT> SetDebug(0) </SCRIPT>

By default (i.e. if you have no SetDebug(…) whatsoever), debugging mode is switched off.

Hints for Coding

There's quite a lot of JavaScripting involved in the Cascading Floating Menu technique. You can easily include those JavaScripts by providing a line like the following, e.g. at begin of your <HEAD> … </HEAD> coding, before the first coding of your menu hierarchy:
```
<SCRIPT SRC="… .js" LANGUAGE="javascript"></SCRIPT>
```
… .js is the name of the JavaScript file you want to include. If you are interested to implement a Cascading Floating Menu yourself, you can buy a ready-made JavaScript file. Just send an email to gg@Itspecial.org.

If you want to modify the default menu width (200 pixels), you can do that in a similar way, e.g.
```
<SCRIPT>PrepareMenu(220)</SCRIPT>
```
You can even combine the helper JavaScripts in one line:
```
<SCRIPT>PrepareMenu(220); SetDebug (1)</SCRIPT>
```
Just as well, you can combine a Cascading Floating Menu with any technique for temporary information described in article Use Temp. Info's to show "what's behind"! .

If you want to use detailing in your document (see article "Selective Detailing"), some care should be taken not to have a link in your menu referring to any information that might be faded out. This might cause an awkward situation to the reader. Therefore, all menu items referring to such an information should be detailed out as well, e.g. by
```
<DIV CLASS="1" STYLE="display:'none'">
<A HREF="#…" STYLE="color:green"> … link text … </A><BR>
</DIV>
```
or
```
<DIV CLASS="1" STYLE="display:'none'">
<A HREF="#…" STYLE="color:blue" ONMOUSEOVER="OpenM(…)"> … item text … </A><BR>
</DIV>
```
Thus the item text will be hidden as well when the information it is referring to. The reader will never be tempted to jump to any information that is non-existing now, i.e. ending up dangling in the middle of nowhere.
Use comments, e.g. in line </DIV>:  Correct behavior of menus is very much depending on correct nesting of the menu coding. And, what's more: faulty coding is very hard to detect on debugging. If you have a complex menu hierarchy with various levels of sub-menus, you might find it quite helpful to see clearly in your code where the one menu is ending and the other menu begins.

In the floating menu of this article you have various examples of launching sub-menus. The most user-friendly method probably is, to launch a sub-menu slightly to the right of the corresponding item. This, however, has the drawback that you might need to call ONLOAD=PlaceDiv(40) or so.

Cascading Floating Menu:
Jump from Everywhere to Anywhere

(IE only)

Cascading Floating Menu: Jump from Everywhere to Anywhere

(IE only)

Cascading Floating Menu:
Jump from Everywhere to Anywhere