Two Level Toggle 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.
The menu can use a websafe font or a non websafe or Google hosted font with web safe fallback font. There are controls for adjusting the color, background, background opacity, hover color and hover background color.
The 1px high separator can have a contrasting color or be made the same as the background.
The navigation can be seen while editing and, prior to publishing, it should be set to "Always On Top" using the arrange menu or the Metrics inspector and the box checked to hide it.
The navigation can be situated over another object if required as shown in this example. This creates a dead space where any links will not work. To avoid this, reduce the widget height to about 20px before publishing the page.
The tab which toggles the menu open and closed is a separate widget so that it can be placed anywhere on the page or command dragged into the header.
The tab icon is "hamburger" style and is created using pure CSS to avoid using an HTML character or an image.
The tab has controls for color, background color and its opacity and border radius. Setting the border radius control to the far right will create a round tab.