EverWeb Codebox logo

EverWeb Widgetbox 3

Mobile Nav Menu Button Widget

Mobile Menu Button Navigation

Mobile Menu Button Navigation Widget

Cick To Open/Close

The widget creates a single level navigation which opens and closes by clicking/tapping the "Menu" button.
The arrow right in this navigation is created using CSS rather than images or HTML characters for faster loading and better rendering in the browser.
This navigation menu can have up to twelve links. The last link can be configured as an external link to open in a new window if required. This is useful for linking to an external blog or a social media page.

Mobile Menu Button Widget

Widget Settings

Enter the required width of the drop down and set the font family, size, color and the background color and its opacity.
Set the separator height and color. Set the height to zero if the separator is not required.
Set the drop down border width, color and corner radius if required.
Check the box if the arrows are required and set their color.
Enter the button text and adjust the width using a drag handle or the Metrics inspector.
Set the button font size and color and the button color and its opacity.
Adjust the values for TB and LR padding to suit. Make sure the button is at leat 32px in height for use on touch devices.
Set the border width, color and corner radius if required.
Set the first three links by entering the link text and selecting the page using the "Link to:" control.
Add more links as required and check the boxes to display them.
To configure the last link as an external one, check the box and enter the URL. Set the link to open in a new window by checking the appropriate box.
Check the box to hide the dropdown and, after the rest of the page content has been added, either bring the widget to the front using the "Arrange" menu or use "Always On Top".

This widget is included in the Mobi widget pack.