EverWeb Codebox logo

EverWeb Widgetbox 3

Mobile Nav Hamburger Widget

Mobile Hamburger Icon Navigation

Mobile Hamburger Navigation Widget
Mobile Hamburger Navigation Widget

Cick To Open/Close

The widget creates a single level navigation which opens/closes by clicking/tapping the icon.
The "hamburger" icon and the arrow right in this navigation are created using CSS rather than images or HTML characters for faster loaading 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.

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.
Set the button and the icon colors. Set the button color to the same as the page background for a more subtle effect.
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.