Two Level Flyout Navigation
This new version of the flyout navigation allows the user to add items by entering the page name and using the "Link to:" control to add the file path and avoid having to enter any HTML.
The navigation can have up to nine items with three of these being directories.
Each directory can have between two and six items.
The navigation can have up to six single level links. The last link can be configured as an external link and open in a new window if required.
The navigation sub menus slide out on hover when viewed on a computer and on click when viewed on touch devices like the iPad.
Two or Three Level Navigation
The navigation can be used on a two level full version of the site which also is required to work on tablet devices.
It can also be used on the fixed width mobile version of the site since the sub menus will flyout when tapped. Javascript has been added to close a flyout on touch devices by tapping anywhere on the screen off the navigation.
It is also possible to use this widget as a sub navigation in the directories of a three level site.
The navigation can scroll with the rest of the page content or be made sticky by checking a box in the widget settings. In this case it should be selected to be "Always On Top" using the Arrange menu or the Metrics inspector.
Styles
The font can be web safe or non web safe or Google hosted with a web safe fallback.
The width of the main and sub section is adjusted using a drag handle or the Metrics inspector.
There are controls for setting the font color and background and the hover color and background. The on load background color has an opacity slider.
The separator height is fixed and it can either be given a contrasting color to provide separation of the tabs or be made the same as the tab background to make it disappear.
Indicators
When the navigation is viewed on a touch device like an iPad, the visitor has no means of knowing which tabs are single level and which are directories. To overcome this, a right pointing triangle appears in the directory tab to indicate that there is more. The triangles can be made to appear on computers by checking a box in the widget settings.
The indicators are created using CSS and inserted as a pseudo element rather than use an HTML entity. This is required since the right pointing HTML triangle is turned into a nasty icon by devices running iOS.
To see how the pointers appear, reduce the browser width.