This simple and unobtrusive menu floats out onto the page from the right when the menu pulltab is hovered (or clicked) and floats off the page on the next hover (or click). The menu system is based on the concept of CSS element positioning using the left and top properties. Note: See floating menu if you require a menu that pulls out from the left.
vPos vertically positions the menu. It can be set to 'top', 'middle', 'bottom' or '##' where '##' is a specific pixel count. limit can be set to a specific pixel count to prevent the menu from appearing too close to the top of the document (set limit="0" for non-use). An id="marker" can also be placed in the document to flag the upper limit of the menu.
pPos vertically positions the pulltab relative to the menu. It can be set to 'top', 'middle', 'bottom' or '##' where '##' is a specific pixel count.
Display of an image on the pulltab is controlled by pullImg. state indicates whether the menu is put away (true) or exposed (false) on startup. Pullout timing is selected by move and menuspeed. Y-axis scrolling is selected by moveOnScroll and scrollSpeed.The float action can be changed from an onmouseover (hover) to an onclick event if desired.
The menu can be styled by CSS properties defined for the items class (table and first level of options) and the pull class (the pullout tab). One use might be to set the font-size to a fixed pitch regardless of user text-size setting. Most of the styling can be placed in an external stylesheet if so desired.
By adding a few images to the menu, we can really improve the look! Instead of the simple MENU tab, using a graphic allows the word to be written rotated as well as flipping to a second one for putting away the menu. And finally a horizontal bar can be added to the top just for looks. to see the enhanced version.
Always provide an alternate menu system for those with no scripting (either text browsers or turned off for security). A noscript element with links is all that is needed. See the source of this page for an example.
There are situations where a topic should not be covered up by the menu floating out. Some examples are copyright notices and update flags. If the content that can't be covered has been styled with a higher z-index, it will not be overlayed. Try pulling the menu over this paragraph to test.
Building the menu dynamically allows the menu contents to be isolated to a single file and included in many documents. The menuWrite() method shows how easy this is to program. The entire script can be removed to a single file and pointed at by each html document in your site. A similar procedure can be done with the style.