Navigation: Cursor =====>

updated December 12, 2002:

The concepts of GhostMenu and FollowMenu have been developed further to the general  Menu()  concept. Based on  Menu()  all kinds of menus can be implemented easily. Details: see article UserMenu - A Host of User Interactivity in a Nutshell

In a previous article (Online Communication, extra window) the main features of online communication were summarized, contrasting them to writing on paper. Here you can read about a good method to implement it.

One such tool is, to provide a collection of links anywhere. By clicking on one of them, the reader can jump at any time to a place anywhere else (in the same document, or also outside). In a jargon term, such a collection is called a "menu". The problem is that such a menu occupies space itself. Space, that's always scarce on screen.

There is no definitive solution to that problem, it depends on the kind of readers your text is aimed at. If they are pretty familiar with handling computers, the best will be to provide a menu that's fully invisible most of the time. Just when (right-)clicking anywhere it appears and offers a number of links. If your readers are rather outsiders to computing, it might be better to always have the menu on screen but in an unobtrusive way. The background is transparent, so the main text is rarely hidden. The reader can drag it anytime to any other place on screen. When scrolling the text, the menu will follow automatically, appearing always at the same place on screen. That's why such a menu is called "FollowMenu".

Let's look at both in detail:

GhostMenu: Ctrl + Right-Click to Toggle it

Simple to describe and to handle, though not extremely user-friendly, is the GhostMenu. The cursor may be anywhere on the main text. When pressing the Control-key and concurrently clicking the right mouse button, the menu pops up with a number of links written on yellow background. Normally its top-left corner will be under the cursor, except when the current cursor position is too close to the right or bottom edge of the browser window. Then the menu is flipped over and appears with another corner under the cursor.

The combination of Control-key plus right-click was chosen because the default action of right-clicking, the browser's context menu, should not be impeded. Thus, by normal right-clicking your readers still can have the context menu appear. If they want your GhostMenu, they should use the combination of Control-key plus right-click.

When any link of the menu is clicked, the main text is scrolled such that the place linked-to is as close to the upper edge as possible. The menu itself is not only moved out of sight; it is made invisible again. Thus it will re-appear upon the next Ctrl + right-click anywhere else on the main text.

If your readers have the GhostMenu on screen, but then they decide to cancel it, another Ctrl + right-click is enough to do away with it.

FollowMenu: Dragging, Scrolling, Resizing

A FollowMenu is always on screen, though not so prominently as a GhostMenu. Its background is transparent, letting the main text shine through. The menu links are written in green color, i.e. discernible among the main text only when looking carefully. So a FollowMenu will rarely interfere with reading the main text.

However, the reader can drag it anytime to any other place on screen. All that's needed is to move the cursor onto any place of the menu (except its links), to press the left mouse button, keep it pressed and move the mouse anywhere else. The FollowMenu will move along, as long as the mouse button is pressed. Once the button is released, it will stay there.

When the main text is scrolled, it will follow and occupy the same position on screen (i.e. the main text will move "under" the menu). Even if the browser window is resized, the place of the menu remains the same (relative to the right and bottom edge), unless the resizing would move the menu out of the screen.

A FollowMenu is always visible. By all experience, this is conceived to be more "user-friendly". An additional benefit is the it is easier for the reader to keep an overview of the main text - it is not interspersed again and again by entries only needed for navigation but adding no more message.

Manipulations needed when Preparing a fresh Article

If you want to equip a text with a GhostMenu or FollowMenu, quite some profound manipulations in the htm-code are needed actually. For that reason, two Flexible Includes have been prepared that will relieve you of all that trouble. (For details on Flexible Includes read my article Flexible Includes - Common Code, but Individually Adaptable.) To implement a GhostMenu, code its call before coding the main text:

<!DOCTYPE … >
<HTML>
<HEAD>

<SCRIPT>GhostMenu("text of link1", 
		" text of link2",
		:
	</SCRIPT>

<!---  Main Text below this point  ---->


</BODY>
</HTML>

Similarly you can implement a FollowMenu:

<!DOCTYPE … >
<HTML>
<HEAD>

<SCRIPT>FollowMenu("text of link1", 
		" text of link2",
		:
	</SCRIPT>

<!---  Main Text below this point  ---->


</BODY>
</HTML>

In your main text remember to place  <A NAME="1".></A>  before the first title,  <A NAME="1".></A>  before the second title, etc. The entries  text of link1 ,  text of link2 , etc. should be identical to the corresponding title text (i.e. usually you will simply copy them). The entry texts should be separated by comma ',' except the last one.

If you need some JavaScript functions in your main text, you can declare them before the declaration of GhostMenu or FollowMenu.

If you have a link to an outside resource in your main text, it is safer to display it in an extra window:

Using a GhostMenu or FollowMenu has an additional advantage: The reader can print out a text without having any one of those navigational elements that would make no sense on paper but just make it more difficult to keep an overview. He/she only has to move it out of the text (sideways) before printing.

To give you a vivid impression, both GhostMenu and FollowMenu have been implemented in this article. The GhostMenu will pop up when you press the Ctrl-key and click with the right mouse button. The FollowMenu is always on screen, though you may have noticed it not yet: move your cursor near the top-right screen corner!