Tab Page Navigation

Smooth Scrolling - Tabs To Anchors

The sticky tab navigation can be seen on the previous page where the visitor can smooth scroll to various points marked by anchors. The tabs can be fixed in position at a set distance from the top of the browser so that they always remain in view.
Using this system in combination with modals, long pages can easily be negotiated and, in combination with modals, the one page website becomes a reality.

Full Width Tab Nav Widget

Widget Settings

The navigation can accomodate up to twelve tabs. The first three tabs are obligatory and more are added by checking the appropriate box.
The tabs can form a single line or be forced to return to two or more lines if required. There are controls for spacing the tabs and the rows.
Check the full width box in the Metrics inspector, set the tab minimum width and the tab and row spacing.
Enter the font name, check the box if it is Google hosted and select a suitable web safe fallback font.
Set the font size and color.
Set the tab background color and its opacity.
Adjust the values for top/bottom and left/right if necessary.
Set the font and background hover colors.
Set the tab border width, color and corner radius if required.
Set the scroll time in tenths of a second.
For each tab, enter the text and set the ID number. Each tab must have a different number and this must correspond with the one in the related anchor.
Immediately before publishing the page, set the fixed distance of the navigation from the top of the browser window and bring it to the front using the Arrange drop down menu.

Full Width Sticky Tab Navigation Widget
Full Width Tab Anchor Widget
Full Width Tab Nav Widget

Anchor

The anchor widget appears as a 20px square. Enter the ID number aand drag it to the required place on the page.
By selecting the anchor and then checking the box next to "Allow free dragging", the anchor can be dragged into the browser background area out of the way of the rest of the page content.

This widget is included in the Full Width Addons widget pack.

EverWeb Widgets | Full Width