EverWeb Widgets HTML5

Click To Slide Out/In Navigation

Click To Slide Out Navigation Menu

Click To Open & Close

This slideout navigation is suitable for mobile websites due to its compact size and the fact that it is hidden until required.
The icon sticks to the left hand side of the browser window at a predetermined distance from the top.
When the icon is clicked, or tapped, the list of hyperlinks slides out.
The list items have enough padding around them to make them an easy target for fingertips on a mobile website.
As can be seen from the screenshot of the widget settings to the right, there are a number of styling options and the widget can accommodate up to twelve hyperlinks.

Widget Settings

Slideout Navigation widget
Slideout Navigation

 slideout nav icon widget

Widget Settings

Set the icon color and its background color.
Enter the distance that the tab is to be from the top of the browser window.
The widget will now look something like the screenshot to the right.
Set the font family, size, color and hover color for the links.
Set the separator color and background color for the slideout.
Enter the link text and select the "Link to:" page.
Enter any more links and check the boxes to display them.

Positioning The Widget

Select the widget, open the Metrics inspector and check the box next to "Allow Free Dragging".
Drag the widget off the page content area into the browser background.
Note that the position and size of the widget doesn't matter at all. Once the widget has been styled, it can be reduced to a small square as shown to the right and positioned anywhere out of the way.
Before publishing the page, select the widget and bring it to the front using the Arrange menu so that it slides out over the top of the page content.

Get The Widget