EverWeb Widgets HTML5

Icon Navigation With Menu Button

Menu Icon Navigation Widget

CSS Styled Menu Button

This is essentially the same navigation as the one on the previous page with a different style of menu button and a selector for choosing the list item arrows.
The navigation menu button was created in response to requests from users who felt that the standard "hamburger" icon wasn't a clear enough indication that the button is for a navigation menu.
This button is created with CSS using the before and after pseudo elements to create the bars rather than use the HTML or CSS entity - ☰ or \2630.
The word "MENU" can be changed to suit any language or an alternative word. This can be any length since the widget can be dragged wider or the width increased using the Metrics inspector.
An advantage of this button style is that its height allows it to be inserted into a mobile page header - along with the <h1> heading - which only needs to be about 50px high. Header height on mobile sites should be kept to an absolute minimum.

Widget Settings

icon menu button mobile navigation widget
Icon Menu Button Navigation

Widget Settings

The widget settings are shown to the right.
Change the button text if necessary.
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.
Choose the arrow type for the drop down menu list items. Test this in the iOS simulator to make sure it is compatible.
If an arrow isn't required, select the blank in the "Arrow" selector in the widget settings.
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.

Hide/Show Navigation
Uncheck To Hide
Get The Widget