The ThemeKit Float Banner [2] is different from the other float widgets in that it is static with animated items and the option to use a background image in three sizes for the various devices.
The overlay has a two column grid layout with two figure elements each containing an image with alt text, caption and an optional link to open internal/external pages. The animation for each is selected from the ThemeKit custom stylesheet
The navigation slides out from the left or right. It has a fixed width and fills the height of the browser/device window. Any overflow will scroll vertically.
Tab
The tab has a " hamburger" style icon when the navigation is hidden and switches to a close "✖" when open.
It has controls for setting the background color and opacity, hover background, icon color, position on the X-axis and border radius.
Since a navigation action tab should placed at least half way down for the convenience of mobile device users the tab is position from the bottom using viewport units.
Panel
The panel is visible for editing and then close by checking a box prior to publishing. Ithas a control for adjusting its width and options to add a heading and/or an image at the top. The panel background color has an opacity slider.
Links
The links can be configured to open internal and/or external pages and have a new window option. They have controls for setting the font, fallback, font size size, color and hover color. The links can have a separator which can be solid, dashed or dotted and is removed from the last item.
Animation
Alll the animations are CSS and are grouped together with a common animation time set in milliseconds.
WIdget Insert
The navigation widget has a fixed position so it can be positioned out of the way below the footer widget on the EverWeb design canvas.
Each image has alt text and options for a caption and an internal/external link. The captions and link icons can show on hover when viewed on computers.
The background is inserted with the ThemeKit Float BG SVG widget. This creates the full size background from an image file that weighs in a less that 2Kb for fast download spead and good quality.
Fixed Position
Note that fixed position items like the slide in navigation and the background SVG can be inserted at the bottom of the page below the footer widgets
