Absolute Floating Menu

Many web pages are too long to fit on most users' screens. The visitors have to scroll to read the article on the page; however such scrolling hides the navigation menus (or a shopping cart contents) usually located at the top of the page.

The javascript shown here allows to create dynamic menus which move along with scrolling. Such floating menu will be always visible on screen. The effect is achieved my moving an absolutely-positioned or relatively-positioned DIV box containing the menu markup.

The floating DIV will visibly move towards the specified viewing area spot, slowing as it moves closer to it and finishing the move with a visible snap. Such animation will definitely draw user attention to the floating menu.

Also available:



Features include:

• Free-floating DIV box with position:absolute (see demo on this page)
• Floating DIV box confined within specific area (demo):

• box with position:relative confined within a container area that doesn't have any other children nodes.
• box with position:absolute confined within a container area having position:relative.

• Complex containers:

• Experimental support for floating DIV confined within IFRAME container.
• Experimental support for floating DIV confined within DIV container with scrollbar.

• Can work as a jQuery plugin.

Floating DIV demonstration

Look for the floating box somewhere on the page.

Click the buttons to move the floating menu to different corners:

Move to upper left	Move to upper center	Move to upper right
Move to center left	Move to center	Move to center right
Move to lower left	Move to lower center	Move to lower right

Using the javascript

To use the script perform the following steps:

• Download version 1.12 of the script code and put it on your server as a separate file and reference it in HTML HEAD:

<script type="text/javascript" src="specify script file URL here">
</script>

• Create a DIV element with id of 'floatdiv' which contains the menu markup and add script start code.

• If you want your DIV box to move around the window freely, put it within BODY tag.
• If you want to confine it to client area of specific container, place it within this container. Make sure that floating DIV box or container has position:relative.

For example:

<div id="floatdiv" style="
    position:absolute;
    width:200px;height:50px;top:10px;right:10px;
    padding:16px;background:#FFFFFF;
    border:2px solid #2266AA;
    z-index:100">
This is a floating javascript menu.
</div>

<script type="text/javascript">
    floatingMenu.add('floatdiv',
        {
            // Represents distance from left or right browser window
            // border depending upon property used. Only one should be
            // specified.
            // targetLeft: 0,
            targetRight: 10,

            // Represents distance from top or bottom browser window
            // border depending upon property used. Only one should be
            // specified.
            targetTop: 10,
            // targetBottom: 0,

            // Uncomment one of those if you need centering on
            // X- or Y- axis.
            // centerX: true,
            // centerY: true,

            // Remove this one if you don't want snap effect
            snap: true
        });
</script>

• Change the targetTop and targetRight variables. They represent the desired distance from the top and right window borders respectively.

• Alternatively, you can use targetBottom instead of targetTop or targetLeft instead of targetRight.
• For centering use centerX: true or centerY: true. Values of target for respective axis will be ignored.
• To remove initial movement set DIV's position properties (top or bottom, left or right) to the same values as target* variables.

• Make sure your page has DOCTYPE set. It doesn't matter if it is HTML 4.01 or XHTML, but the script will fail to work if Internet Explorer is in quirks mode.
• Be sure to verify page design with the Javascript turned off.

• If all else fails, use script support services.

See Also

Browser compatibility

The javascript snippet above was tested on the following user agents:

Windows Desktop	Firefox 3.0.x	Ok.
	Internet Explorer 8.0	Ok.
	Google Chrome 7 Google Chrome 23	Ok.
	Safari 5.0.2	Ok.
iPad tablet	Google Chrome 23	Ok.
	Safari on iOS 6.0.2	Ok.
No Javascript or Javascript turned off	Any	Menu will be absolutely positioned on initial style left and top values and will not move.

If you like our script, please or at least rate it @ hotscripts.com! Excellent!Very GoodGoodFairPoor