EverWeb Codebox logo

EverWeb Widgetbox 3

Mobile Slide In Navigation
Chameleon Buttons

Mobi Slide in Navigation Widget
Mobile Navigation Button Widget
Mobi Slide in Sub Navigation Widget
Mobile Sub Navigation Chameleon  Button Widget
Horizontal Navigation Widget

Main & Sub Navigation

The navigation widgets and their associated buttons create slide in main and sub navigation for tablet and smart phone websites.
The main navigation slides in from the left on button click and the sub from the right.
The menus remain fixed to the left or right of the browser window until the visitor taps the button or on free space. The distance of the navigation from the top of the browser window can be set.
The menus are activated by clicking buttons which use separate widgets to create them. This allows the button to be placed anywhere on the page - independent of the navigation menu.
The button is the standard "hamburger" style for the main navigation and four squares for the sub. The button changes to an X when opened.
The button background color can be made the same as the page background to make them less obtrusive while still maintaining the correct size for fingertip operation.
Each menu can accomodate up to twelve links. The last two can be configured as external links which can open in a new window for full site use.

Widget Settings

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.
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. Note that the new window function is only for full site use.
The width of the navigation menu can be adjusted by dragging or using the Metrics inspector. If used in conjunction with the slide in sub nav, its width needs to be equal to or less than the page content width.
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 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, close icon color, background color and opacity and the corner radius and drag it to a suitable location.

This widget is included in the Mobi widget pack.

Horizontal Navigation Widget
Horizontal Navigation Widget