/ JTricks.com / Automatic Generators / AutoAnchor Menu / Together with Absolute Floating Menu

Last updated: 21 Sep 2012

Imagine - this is a background for floating menu container.

The border of this container is just for the demonstration of the script.

AutoAnchor Menu demo together with Absolute Floating Menu

This page contains AutoAnchor Menu script demostration. The menu on the right is automatically generated from headers of this article.

Code

The menu on the right is automatically generated with the following code:

<script type="text/javascript">
    var anch = AutoAnchorMenu('floatdiv');
    anch.scatterTop('To top')
        .scatterBottom('To bottom')
        .gather()
        .scatter('h2')
        .gather();
</script>

Since such menus are most usable when located always on screen regardless scrolling, in this demo it is combined together with Absolute Floating Menu.

Absolute floating menu is initalized in the following way:

<script type="text/javascript">
    floatingMenu.add('floatdiv',
        {
            targetTop: 10,
            prohibitXMovement: true,
            snap: true
        });
</script>

Make sure you upload AutoAnchor Menu and Absolute Floating Menu to your server and reference them in HTML head (with correct path):

<script type="text/javascript" src="path-to-floating.js"></script>
<script type="text/javascript" src="path-to-autoanchormenu.js"></script>

Finale

Thank you for looking at the AutoAnchor Menu script demo!

If you got to read this sentence without scrolling then you've got a huge monitor. To expereince the demo please reduce the browser window size so that there actually is some scrolling in the window!

If you clicked a menu item to scroll here, congratulations! You've used AutoAnchor Menu.

AutoAnchor Menu demo together with Absolute Floating Menu

Code

See also

Finale