You can see an example of this effect at:
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.
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)
Note: Only users that have purchased the Advanced Floating Menus Add-in can fully use the example. Unregistered users will only be able to view the example in the preview window.