Just imagine. This could be your floating menu.

JTricks.com
Building blocks scripts
Forms & validation
Navigation scripts
Window management
Javascript Tricks, Samples, Tutorials & Howtos

New versions notifications available via

Follow jtricksdotcom on Twitter
Last updated: 22 Mar 2012

Absolute Floating Menu as jQuery plugin

Absolute Floating Menu script is also a jQuery plugin right out of the box (in addition to standalone mode). When the script code is loaded, if jQuery was loaded before that (even in when noConflict() is used), Absolute floating menu will register itself as jQuery plugin.

Also available:

jQuery floating DIV demonstration

Look for the floating box somewhere on the page.

Using the javascript

To use the script as a jQuery plugin perform the following steps:

  • Download, put on your server and reference jQuery library in HTML HEAD.
  • Download version 1.12 of the script code and put it on your server as a separate file and reference it in your page header after jQuery library.

    Please don't reference www.jtricks.com directly from your HTML code, upload it to your server instead.

    For example:
<script type="text/javascript" src="/js/jquery-min-1.4.4.js"></script>
<script type="text/javascript" src="/js/floating-1.12.js"></script>
  • Create a DIV element which contains the menu markup and add script start code. 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">
    jQuery(document).ready(function($) (
    {
        $('#floatdiv').addFloating(
            {
                targetRight: 10,
                targetTop: 10,
                snap: true
            });
    });
</script>
  • Other options for floating are shown here.
  • 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.
Donations and Script Rating
If you like our script, please
or at least rate it @ hotscripts.com!