EverWeb Widgets HTML5

Social Media Links Slideout Widget

Share Slideout Links

Click To Open & Close

This tabbed slideout is intended for social media links but can also be used for links to other websites since each link can be set to open in a new window if required.
The tab sticks to the left hand side of the browser window at a predetermined distance from the top.
When the tab is clicked, or tapped, the list of hyperlinks slides out. The list items have enough padding around them to make them an easy target for fingertips on a mobile website.
The compact design also makes this setup more suitable for use on smart phone sites than the one on the previous page.
As can be seen from the screenshot of the widget settings to the right, there are a number of styling options and the widget can accommodate up to eight hyperlinks.

Widget Settings

Sticky Social Media Buttons widget
Slideout Hyperlinks

share slideout widget tab

Widget Settings

Enter the tab text. The tab will stretch to accomodate this.
Set the font family, size, color and font weight.
Set the tab background color and enter the distance that the tab is to be from the top of the browser window.
The widget will now look something like the screenshot to the right.
Set the font size, color and hover color for the links.
Set the separator color and background color for the slideout.
Enter the link text and URLs for the first three links and check the boxes for any that are required to open in a new window.
Enter any more links and check the boxes to display them.

Positioning The Widget

Select the widget, open the Metrics inspector and check the box next to "Allow Free Dragging".
Drag the widget off the page content area into the browser background.
Note that the position and size of the widget doesn't matter at all. Once the widget has been styled, it can be reduced to a small square as shown to the right and positioned anywhere out of the way.
Before publishing the page, select the widget and bring it to the front using the Arrange menu so that it slides out over the top of the page content.

social-media-button-links
Get The Widget