EverWeb Codebox logo

EverWeb Widgetbox 3

Slide In Vertical Nav widget

Vertical Slide In Navigation

Slide In Left or Right

This navigation slides in from the left or right on button click. The menu remains fixed to the left or right of the browser window until the visitor clicks the button or clicks on free space. The distance of the navigation from the top of the browser window can be set.
The menu is activated by clicking a button which uses a separate widget to create it. This allows the button to be placed anywhere on the page - independent of the navigation menu.
The button can be either Text or an Icon.
The menu can accomodate up to twelve links. The last two can be configured as external links and to open in a new window if required.

slide in vertical navigation widget
slide in vertical navigation widget
slide in navigation direction

Widget Settings

Set the styles for font family, size, color and the tab background and hover colors.
The tab height can be adjusted using the Vertical Padding control. This height should be a minimum of 30px for use on mobile sites.
The minimum width setting can be used to force all the tabs to be of equal width.
Use the value for Left Padding to adjust the text position horizontally.
Adjust the separator height and set its color.
Enter the link text and select the "Link to;" page for the first three three items.
Add more items as required and check the boxes to display them.
Use links [11] and [12] to create external links. They can also be used to create internal links which open in a new window by entering a relative file path into the URL box.
Using the Metrics inspector, carefully adjust the widget so that it fits the navigation.
Select the navigation slide in "Direction" - either left or right. NOTE that this MUST be the same as the direction setting set in the button.
Enter the navigation's vertical distance from the top of the browser window.
Set the navigation animation speed.
Uncheck the box next to "Show Navigation". The navigation will disappear and can now be dragged anywhere out of the way. To drag it 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".

Button

Use either the Text or an Icon button.
Make sure the "Direction" setting on both the navigation and the button are the same!

This widget is included in the Navigation-2 widget pack.