Flyout Nav
Flexible flyout from the left inline navigation - vertical on mobile devices.
Flyout Navigation
The navigation is laid out using the CSS grid module while the links use flexbox to give the animated effect. The links are inserted using a modified version of the EverWeb widgets API Assets List. The links can be to an internal pages, an external page or file or an internal file.
The links fly out inline across the top when viewed on wider screens. On mobile devices they arrange themselves vertically.
Icon
The "hamburger" icon tab sits at the top left and has controls for setting the icon color, background color and its opacity, the hover color, icon padding, the border radius and its position on the Y-axis.
Links
The links can use a web safe font or a non web safe or Google hosted font with a web safe fallback. There are controls for setting the font size, color, hover color and the background color and its opacity.
The links are inserted using a modified version of the EverWeb Widget API Assets list and can open internal or external pages or files.
Current Page & Animation
The current page can be indicated with a contrasting color and the animation time is set in milliseconds.
Break Point & Position
The break point at which the navigation switches from horizontal to vertical can be selected from a dropdown menu and the navigation can be made sticky by checking a box.
Marketing Banner
The first item on the page is created using the RGL Marketing Pan Banner widgets. Follow the link below for more info…
Three Column Footer
The footer has 3 side by side columns when viewed on wider screens. These rearrange themselves as the browser/device screen width is reduced. There is a maximum width setting and a checkbox which should be checked if the various icons are required to be shown.
Left Column
This column has a heading and a text block. The text block can have several lines of text and there are controls for aligning the text for computer and mobile.
If the "Show Icons" box has been checked, a phone number can be added at the bottom. This changes to a "Call Me" phone icon when the page is viewed on smart phones.
Center Column
This column has an optional heading and a text block which has controls for setting different text align on computer and mobile.
If the "Show Icons" box has been checked, an email icon can be inserted at the bottom.
Email Spam Protection
The email link has fields for the title, recipient email address and the email subject. The email address is entered in three boxes for name, domain and domain extension. The @ and the dot are removed to be replaced using javascript. This prevents spammers from harvesting the email addres using scraping software.
Right Column
This has an optional heading and block links. The links can be configured to open internal or external pages and in a new window if required.
Scroll Top
If the "Show Icons" box has been checked, a scroll top icon can be inserted at the bottom. This function has a field for entering a title and a control for setting the scroll time in milliseconds.
© Notice
An optiona; copyright notice can be added below the columns. This has a text field and a checkbox for adding the copyright year with auto update.