EverWeb Widgets

Responsive GridLayout Elements [3]

A combinatio header with logo link, phone, heading and navigation, breadcrumbs menu, icon toolbar, auto padded footer and flyout and flydown animated icon links using four different types of icon.
Click any widget icon to see the demo …

Combo Header Logo Phone Nav

This header was designed for those who need to combine a logo/link, phone number/phone button, h1 heading and a navigation in one cohesive responsive container.
The navigation is a dropdown using an icon tab. The header can be made sticky by checking a box or just the navigation can be made sticky and allow the header to scroll with the rest of the content.

Breadcrumbs Navigation

Breadcrumbs are used to navigate larger sites with directories and sub directories rather than using a navigation menu with two or three directories which leave the visitor lost and confused.
This navigation uses the grid layout so that the tabs maintain equal width despite varying amounts of text. The tabs switch from inline to vertical stack at screens widths below the break point.

Round Icon Toolbar

This is a horizontal toolbar using the Round Icon set. The icons are built in to the widget and are inserted by selecting them from a dropdown. They can have a scale animation on hover if required.
The toolbar can be relatively positioned anywhere in the stack of widgets or, by checking a box, made sticky and be fixed to either the top or bottom of the browser/device window.

Auto Padded Footer

The footer was designed for use with responsive pages that have a toolbar stuck to the bottom on the browser or device window. It has a control to add bottom padding so that the footer content is not obscured by the toolbar.
The footer has a text field for the © info and a checkbox to add and auto update the copyright year. There is a smooth scroll to the top function using a chevron up icon.

Font Awesome Fly Down

The tab appear at page load or slide in from the left or right browsers edge. The tab icon can have a spinning or flashing animation. The dropdown on click links use the Font Awesome range of icons. The animation speed can be varied and the last link can be configured as a spam protected email link. The tabs can be positioned absolutely or fixed at a preset distance from the top.

Ionicon Fly Down

The tab appear at page load or slide in from the left or right browsers edge. The tab icon can have a spinning or flashing animation. The dropdown on click links use the Ionicon range of icons. The animation speed can be varied and the last link can be configured as a spam protected email link. The tabs can be positioned absolutely or fixed at a preset distance from the top.

Round Icon Fly Down

The tab appear at page load or slide in from the left or right browsers edge. The tab icon is a share arrow SVG.. The dropdown on click links use the Round icons which are built int to the widget. The animation speed can be varied and the last link can be configured as a spam protected email link. The tabs can be positioned absolutely or fixed at a preset distance from the top.

Social Icon Flyout

The tab appear at page load or slide in from the left or right browsers edge. The tab icon is a share arrow SVG.. The dropdown on click links use the Social Icon Set which is built int to the widget. The animation speed can be varied and the last link can be configured as a spam protected email link. The tabs can be positioned absolutely or fixed at a preset distance from the top.

Font Awesome Flyout

The link tab sits at the browser/device window left edge. It can use any of the Font Awesome icons which can be animated to spin or flash. A link to the cheatsheet is built in to the widget
The links flyout on click or tap. The animation speed and the maximum width can be adjusted. The last link can be a spam protected email link and the tab can be positioned absolutely or fixed at a preset distance from the top.

Ionicon Flyout

The link tab sits at the browser/device window left edge. It can use any of the Ionicon icons which can be animated to spin or flash. A link to the cheatsheet is built in to the widget
The links flyout on click or tap. The animation speed and the maximum width can be adjusted. The last link can be a spam protected email link and the tab can be positioned absolutely or fixed at a preset distance from the top.

Round Icon Flyout

The link tab can be positioned absolutely or fixed at a preset distance from the top and has an SVH share icon. The link tabs flyout on click with controls for speed and maximum width.
The links use the Round icons which are built into the widget and selected from a dropdown menu. Each link tab can have a different background color if required.

Social Icon Flyout

The link tab can be positioned absolutely or fixed at a preset distance from the top and has an SVH share icon. The link tabs flyout on click with controls for speed and maximum width.
The links use the Social Icon set icons which is built into the widget and selected from a dropdown menu. Each link tab can have a different background color if required.

© EverWeb Widgets -