EverWeb Codebox logo

EverWeb Widgetbox 3

Flyout Two Level Navigation Menu

Widget Settings

Two level flyout CSS nav menu
Flyout Navigation Menu

Flyout Two Level Navigation

Vertical Menu

This widget can be used to create a two level, vertical menu with flyout sub menus.
It will also work on tablet devices since the flyouts can be closed by tapping the screen anywhere outside of the menu itself.
Read THIS page before using the widget.

Widget Settings

The widget settings are shown to the right and the first ones are for setting up the basic dimensions.
The menu width needs to be set because this is also used for the correct operation of the flyout.
Padding can be added to the individual blocks both for appearance and to add enough height to make them an easy target for fingertips when viewed on mobile devices. These blocks should be at least 30 px high. The height can be calculated by adding twice the value of the vertical padding to the font size.
The navigation block separator can be styled for height, style and color. Set the height to zero if it is not required.
Enter the font family, check the box if it is Google hosted, select a suitable web safe fallback font and set the font size.
As can be seen from the widget settings, the first and second levels can be styled separartely for font color, font hover color, background color and background hover color.

HTML

The HTML code is prepared as shown on the previous page and pasted into the HTML Code box.
Obviously, the navigation should be created on a master page so that it can be updated quickly on all the pages of the site when new pages/directories are added.
NOTE: Make sure the navigation is brought to the front using the Arrange drop down menu prior to publishing the page.
Note that EverWeb V1.8 has a new feature in the Arrange menu for this purpose named "Always On Top".
After adding new menu items on the master page, "Publish Entire Site" must be selected for the changes to take place.

This widget is included in the Navigation-2 widget pack.