Absolute Floating Menu confined mode demo

Absolute Floating Menu can work in confined mode, meaning it's movement is restricted to a container. Please see such demo to the right. The effect works best for long containers placed between header and footer to the right or to the left of main page content area.

Also available:

• Absolute Floating Menu packaged as a module for Joomla makes using confined mode of Absolute floating menu much simpler in Joomla environment.

Using position:absolute within position:relative container

In order to achieve this effect, you can:

• Download script source on Absolute Floating Menu page 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>

• Put DIV box with style position:absolute inside DIV box with position:relative. For example:

<div
    class="box"
    style="position:relative;
           float:right;
           width:100px;
           min-height:1300px">
    <div
        id="floatdiv" class="box"
        style="position:absolute;
               width:96px;
               height:120px">
        This is a floating menu.
    </div>
</div>

• Note that floating code needs to find the height to move in. However DIVs with position:relative containing only DIV with position:absolute will not have any height unless it is specified in CSS. Meaning it can be specified in CSS or the script will try to navigate DOM tree upwards to see if any parent has height more than that of the DIV container to move around.

• Start floating menu by placing the following code in your HTML page:

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

            // prohibits movement on x-axis
            prohibitXMovement: true,

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

Using position:relative box within other container

Instead of putting position:absolute box within position:relative container you can put position:relative box within other container without positioning requirements. However in this case the script expects the container not to have other children that could influence the layout flow.

For example:

<div
    class="box"
    style="width:100px;
           min-height:1300px">
    <div
        id="floatdiv" class="box"
        style="position:relative;
               width:96px;
               height:120px">
        This is a floating menu.
    </div>
</div>