For Navigation: Cursor =====>

Demonstration included to this article -
but available only in Internet Explorer!

Double-click in any empty place in left screen half
to see a demonstration to this article!

"Not the cursor should have to be moved to a menu. The menu should pop up just where the cursor is!" That's the main idea behind a Floating Menu. Adding much "user-friendliness" to your web site. And saving precious screen space.

A "Floating Menu", that's a menu without a fixed location on the page, requiring the user to move the cursor exactly onto the menu item wished, right across the screen perhaps. Instead, upon a double-click anywhere on the page the main menu pops up just under the cursor. When the cursor is moved onto a menu item, the pertaining submenu pops up, giving access to other menu items in turn. Or, if it was an "elementary" menu item, it can either be an external link, or the menu popping up now could hold some other UIF elements that are usually not expected in a "menu" (e.g. a scrollable list).

Menu Hierarchy

In HTML coding, the individual menus are represented by DIV's, each one with some attributes. Like in the following coding scheme:

<DIV id=menux style="position:absolute; visibility:hidden; width:…; … ">
	:
	:
</DIV>

Each menu has an identifier. By default it is "menu_x" (but if you want, you can declare it to a different name). The main menu's id is  menu0 , its items link to submenus  menu1 ,  menu2 , etc. The sub-submenus of  menu1  are called  menu11 ,  men12 , etc.,  menu2  has sub-submenus  menu21 ,  men22 , etc. And so on, for all the submenus.

Initially each menu's visibility is  hidden . The visibility will be changed dynamically by the functions  Toggle()  and  Swap() 

The  width  should be chosen such that the longest menu item can just be accommodated. If you want, any other style attribute can be added (e.g. background color, border, font, etc.) Only intermediary menus need a  width=… , elementary submenus are sized automatically.

Within the <DIV> … </DIV> bracket there can be anything you can code in HTML. In most cases it will simply be a collection of hyperlinks.

The following line is the coding scheme of a list item linking to a submenu:

  <A HREF="#" ONCLICK="Toggle(…); return false" ONMOUSEOVER="Swap(…)"> item text</A>

 Toggle()  and  Swap()  are two functions defined in an external Javascript file  MenuScript.js . Their parameters are the indices of the submenus to be toggled and swapped when this item is clicked or when the cursor is moved onto it, respectively. Note that an additional  return false  is needed for the attribute  onclick=  , or the browser would take the pseudo-target  href="#"  as an error when the item is clicked. If you only want the latest menu to be closed without another one to be opened (such as with active and inactive items combined in a menu), use  Swap()  with the parameter being omitted.

A list item linking to any external location ("active item") should be coded like the following:

  <A HREF=" item's location "> item  text </A>

As usual, the item's location can be relativ to the current working directory, or absolute  (http://www. … ) 

As well, a submenu's contents could be anything else you can implement in HTML. Take for example a scrollable list:

<SELECT  SIZE="…" NAME="…" ONCHANGE="DisplayArticle (…)" STYLE="width:…; … ">
	:
<OPTION VALUE="…">… … …</OPTION>
	:
</SELECT>

DisplayArticle is another Javascript function, comprising only one line:

function DisplayArticle (form) { window.location = form.articles3.value; }

Some Things to keep in Mind

If you want to give the visitor some additional comments to a link, you can do that by

  <A TITLE="…"> item  text </A>

By that a temporary tooltip will pop up when the cursor is moved onto the link for some ½ seconds.

You can declare additional style attributes. For example, if you want a menu with a border:

  <DIV STYLE="border: 1px solid black; … … … ">

Or writing menu items in another font:

<DIV STYLE="font: normal small-caps 12pt serif; … … … ">

Then, however, it might be needed to modify  width=…  and/or the global variable  displ  in  MenuScript.js  .

For having a certain background color to a menu, do e.g. the following:

<DIV STYLE="background-color:yellow; … … … ">

To make your menus more user-friendly, active and inactive menu items should be discernible at first glance (e.g. by bold letters or different colors, like in the following coding scheme).

  <A STYLE="font-weight:700; color:green"> … … …<A>

You can override the DIV style for each item specifically:

  <A STYLE="background-color:red; … … …"> … … …</A>

Note, however, that this background color applies only as far as the lettering of the item goes. Farther to the right, the DIV background color will still be visible.

Other Considerations

Better to code  width=…   in an absolute number (instead of  width=…%  ), or the menu will pop up too small if the browser window is not maximed. However: be careful with various screen resolutions!

Sometimes it might be useful to combine active and inactive items in one menu. I recommend to add  onmouseover=Swap()  (with parameter omitted!) to the active items and to arrange the active item(s) at the end of the menu, beneath the inactive items.

You can have a menu hierarchy of any number of levels (on a 32bit-machine, theoretically up to some 9 levels). Such a steep menu hierarchy would not be very user-friendly, though: only with very narrow submenus (= one-word menu items) and on an always-maximized browser the complete menu hierarchy would fit into the window.

It might be useful to have the main menu launched such that the cursor is right on any menu item you want to suggest to look into. Thus the pertaining submenu is launched a moment after double-clicking. The visitor might be tempted to go into the pertaining submenu and, hopefully, "drill" further down. - You can do that by the global variables  dx  and  dy  in the Javascript file  MenuScript.js . If you don't want to use this trick, init them to  dx = 0, dy = 0  .

A menu can hold anything you can implement in HTML. However, menus in particular are not accepted if they have too much of loading time. So, for example, you could have images in your menu. Large images require long loading times. Therefore, use thumbnails instead of full-size images!

Technically it is possible to have up to 9 submenus to each menu. Elementary menus can have more than 9 items. Thus you can accommodate theoretically more than a thousand menu items.

To keep this example simple, the menu hierarchy unfolds from left to right. If the window is too narrow, the elementary submenus might fall "out" of the window. In such a case, you should consider to have a menu hierarchy more flat. If that's not possible, you can set the global variable  gap  in  MenuScript.js  to a negative number. Then, however, it will be more user-friendly to have each menu with a border or at least in a different background color.

PrepareMenu()

By default, the Javascript functions of the 'Floating Menu' concept are prepared to handle a single menu. If you want to apply them to a multi-menu hierarchy, you should call the following function before the first call of  LaunchMenu() :

The first parameter,  name , is the name common to all menu identifiers. By default it is  menu . But remember: "you can declare it to a different name" I said. (That's done by this function.)
The second parameter,  gap , is a number determining the distance between a menu and where its submenus are launched.
Finally,  displ , is the step size (in pixels) by which a submenu is displaced downwards from its parent menu.

A good time when to call it is the very first thing happening when your htm-file is loaded, coded as:

Finally: Try it yourself!

There is a sample to this article, a multi-level menu hierarchy into my article archives, based on a Floating Menu, with all the articles subdivided into many subject groups. One submenu comprises a scrollable list. If you want to see how this is done, view the source code (right-click, click  "View Source"  in the context menu). If you want to use it, you can save the source code onto your hard drive and copy the pertaining code parts into your own html-files. (If you don't agree with the categorization I chose here - it was only done for the sake of demonstration!)

And now, take a look for yourself: Double-click anywhere on this page, and watch what happens. When you want to remove the menu hierarchy again, double-click once more!