EverWeb Widgets HTML5

Mobile Click Drop Icon Navigation

Click Drop Icon Navigation Widget

Click To Open - Click To Close

This mobile website navigation drops down on click from the universal navigation icon. The icon is created using CSS to avoid using an image.
The menu is single level but can accomodate up to twelve items which should be more than enough for a smart phone version of a basic website.

Widget Settings

The widget settings are shown to the right.
Set the icon color and background color.
Enter the required navigation drop down width.
Set the font family, size and color and the background color.
Set the border width, color and corner radius. If no border is required, set the width to zero. Set the separator width and color. Set to zero if the separator is not needed.
Check the box if the arrows aren't required.
Enter the link text and choose the "Link to:" page.

NOTE: The first four items are obligatory. Subsequent items are added as required and the box checked to display them.

IMPORTANT: Before publishing the page, uncheck the box to hide the navigation. Select the navigation icon and bring it to the front using the Arrange menu. Find out more about Stacking Order.

Widget Settings

icon mobile navigation menu widget
Icon Navigation

Get The Widget

Alternative CSS Styled Menu Button

The navigation menu on the NEXT page is similar but has a pure CSS button with text which can be changed to suit different languages.

Hide/Show Navigation
Uncheck To Hide