Advanced Floating Menu Examples

In the section below you can view some examples on how to use the Advanced Floating Menu Add-in on your pages depending on the use case.

Example 1: Floating Menus - Customized Floating

Instead of a constantly floating menu, you can set the menu to float within a specific area of the page. In this example the floating menu you can see at the left, floats within this section only.

The menu, is positioned with an ID set for a tag that defines the "floating" area. This tag (in our case a DIV) also defines where the float starts and where it ends.

These are the settings for the Main Menu Group's "Menu Floats on Scroll" property:

This floating menu example has only one item, but you can create a fully working menu with multiple levels as usual.

Click here to download this project

Example 2: Floating Menus - Vertical Floating Navigation

You can see an example of this effect at: https://www.likno.com/allwebmenusinfo.html

Why would I need a navigation like this?

When a page is very long it results in extensive scrolling, and the reader/user may get confused.

While scrolling, the vertical floating menu has a dual purpose; to point out/hightlight the section the user is reading and to give direct links to other sections within the page.

How to implement this in my page?

Let's assume that the target page has 3 important sections and we need to create this vertical navigation to cover their full scrollable area.

This navigation will be created by 3 separate menus (in this example float3, float4 and float5), one menu per section.

The first step is to create each menu (using the standard procedure), compile them and link them in the target page. We don't need to apply any floating effect for now since we need to make sure that all menus are properly positioned in their spots.

For all 3 menus, we use an "element-related" position and tweak using OffsetX and OffsetY values to match the menu design.

Initially, the menus should look like this:

Why do I need 3 menus instead of just one?

When the user scrolls the page and the first section is visible (in our example, the first section is the "AllWebMenus Overview"), the float3 menu will float vertically then it will be instantly replaced by float4 when the next page section is within the browser's visible area and so on. We don't want to refresh the page for this transition to happen so when one float menu disappears the next one will appear.

Each menu has the same basic design but a different "item" looks "selected/active" at a time.

All 3 menus will look for their positioning anchor IDs inside the html code of the page:

In the image above, the Anchor IDs are coloured in pink. We set the anchors to match the start of each section and we also add 3 named anchors (marked in cyan). These are needed since all menus will have direct links (#anchorname) through the page. This will help the user to jump from one section to another without scrolling up and down just to find where each section starts.

OK, the menus are in place but they stand still! Now, what?

Now, the trickiest part is to apply the vertical floating effect and make sure that when the first float reaches a specified point, it STOPS AND DISAPPEARS for the next floating menu to APPEAR AND MOVE instantly.

All floating menus will have some common settings.

In the Main Menu Group, the "Menu Floats on Scroll" property should be set to "Advanced Floating" with a "Smooth" movement type which should be triggered when the top side of the menu reaches a distance of 100px from the window top side:

The rest of the settings in this form will be different for each menu.

Float3 settings

Float4 settings

Float5 settings

Note: In most cases the "Floating Movement Ends" offset depends on how the next float menu is positioned. In our example, all menus have a vertical offset (OffsetY) to make sure the "active item arrow" points to the header of each section. The entire menu has a total height of 152 pixels and since its bottom side is the one that counts, then the formula to find the correct Offset is:

Menu Total Height - OffsetY of the NEXT float menu + 1

(for example, for float3 menu the formula will be:
215px - OffsetY of float4 (57px) + 1)

The extra pixel is needed to avoid the rather rare case of a simultaneous appearance of two menus.

Click here to download this project (float3, float4 and float5 menus)

Example 3: Floating Menus - Floating Navigation Tooltip

You can see this example at https://www.likno.com/awm_version5.php

This is another example where two floating menus have an element-related position in the page and when float1 menu stops and disappears, float2 menu appears and starts to move (float vertically):

The slight difference in this example is that each menu has only one item and there are no links added. That means, the floating menus purpose is to act like a floating tooltip, an informative box for pointing out/highlighting the section the user is actually reading. Just like the example above, this scenario applies to pages where extensive scroll occurs.

Click here to download this project (float1 and float2 menus)