EverWeb Codebox logo

EverWeb Widgetbox 3

Slide In Horizontal Nav widget

Horizontal Slide In Navigation

slide in horizontal navigation widget
slide in horizontal navigation widget

Slide In Up or Down

This navigation slides in from the top or bottom on button click. The menu remains fixed to the top or bottom of the browser window until the visitor clicks the button or clicks on free space.
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.
The menu can be forced to return to two or more lines by reducing the width and increasing the height. There is a separate control for creating a horizontal separator as can be seen from the screenshot below.

slide in horizontal navigation widget rows

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.
The tab separator control is used to space out the tabs horizontally.
The row separator control is used to space rows vertically if necessary.
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 "Direction" - either top or bottom. NOTE that this MUST be the same as the direction setting set in the button.
Choose the navigation position against the browser edge when opened - either left or right.
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".

slide in navigation direction

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.