Thes widgets create a slide in tab navigation for long pages or one page websites.
The Tabs widget is similar to the navigation widgets on the previous page which slide in on button click. The Anchor Button widget creates the slide in/out action.
The anchor widget creates the anchors and the Go Top widget creates a sticky go top button with a smooth scroll action to return the visitor to the tabs button from any point on the page.
Set the styles for font family, size, color and the tab background color and opacity.
The tab height can be adjusted using the Vertical Padding control. This height should be a minimum of 30px for use on mobile sites.
Use the value for Left Padding to adjust the text position horizontally.
Adjust the separator height and set its color.
The width of the navigation menu can be adjusted by dragging or using the Metrics inspector.
Enter the text for the first three tabs and also a unique anchor ID. This MUST be the same as the one in the widget settings for the corresponsing anchor widget.
To add more tabs, enter the text and ID and then check the boxes to display them.
Select the slide in direction which obviously must be the same as that selected in the button widget.
Enter the navigation's vertical distance from the top of the browser window.
Set the navigation animation speed which is expressed in tenths of a second.
Uncheck the box next to "Show Navigation". The navigation will disappear and can now be dragged anywhere out of the way. To drag it to the left - out of the page content area - select it and check the box next to "Allow Free Dragging" in the Metrics inspector.
From the Arrange menu, select "Always On Top".
Set the button icon color, background color and opacity and the corner radius and drag it to a suitable location.
The button is large enough a target for a finger tip but can be made to appear less intrusive by making its background color the same as that of the page content.
The anchor widget appears as a 10px square and only requires the ID to be inserted.
Make sure this ID is exactly the same as the one for the corresponding anchor buton.
It can be command dragged into the header or footer or positioned outside of the content area by checking the box next to "Allow free dragging" in the Metrics inspector.
Smooth Scroll Go Top
The back to the top arrow uses smooth scrolling and fade in/out animation.
The arrow only appears once the visitor starts to scroll a certain distance which can be adjust to suit the circumstances.
The arrow sticks to the bottom of the page and can be positioned left or right. The horizontal distance from the left or right edge and the distance up from the bottom is also adjustable.
The time that the content takes to smooth scroll to the top is adjustable so that it can be varied for different page content heights.
Set the arrow color.
Choose the required background color and set the background opacity.
Choose the position of the button in the browser window - left or right.
Set the horizontal distance of the button from the browser edge.
Set the vertical distance from the browser bottom.
Set the scroll amount. This is the distance the vistor will scroll before the button appears.
Set the button fade animation time.
Set the button scroll time. This time will vary depending on the page content height.
The anchor tab navigation can be used in combination with either the main or sub nav widgets on the previous page but NOT both.
If used with the main nav, the anchors tabs must be set to slide in from the right.
Conversely, if used with the sub nav, the anchor tabs must be set to slide in from the left.
The button for the anchor tabs and the navigation are the same so they should be differentiated by color - and perhaps a label - if used together.
This widget is included in the Mobi widget pack.