Uncle Jim's JavaScript Examples

Floating, Expanding Menu

Author: Jim Stiles

In this example, you will see a floating menu on the right, bottom of the page. As you scroll up and down the page, you will notice that the menu will automatically move with the page so it stays at the same location, regardless of where you are on the page.

This menu takes up very little room and is viewable at all times. You may want to stay away from putting anything on the RIGHT side of the page so the menu will not cover it up. However, if you do, the menu will simply "roll over" whatever is there. See the example below.

When you mouse over the menu title, it automatically opens up the menu, giving you linking options. I have placed three workable links within this menu as an example. After the menu has been opened, it will remain there until you move the page again. At this time, the menu will close up and continue to float with the page.

Due to the complexity of this JavaScript, it usually causes your page to load about five to ten seconds longer than it normally would. However, The convenience of this type of navigational menu is well worth the additional load time and your visitors will like the easy of use this menu provides.

COPY - Insert Between Head Tags: <HEAD></HEAD>

COPY - Insert Inside Body: <BODY></BODY>

COPY - Insert into Body Tag: <BODY 'CODE HERE'>

Close This Window