Social Navigation Fade In
The widget uses the Social icon set. There are 25 icons in the set to cover all the popular social media sites, email and "about me".
The images are download by clicking a link tab in the widget settings. The required ones are dragged from the Finder folder onto the Assets List in the widget settings.
The navigation would normally be positioned at or near the top of the page and set to fade in after the header has scrolled out of view.
Creating The Links
In this application, the EverWeb Widget API Assets List is modified to create a list of links rather than a bunch of images. For those who are not yet familiar with this, here's how it's done …
Click the "Add" button and an entry will apear with "Double click to edit".
Select this text and then add the data in the boxes provided.
Once the data has been entered, single click the item in the list and it will become editable. Enter a suitable name for the link.
Repeat as necessary.
The icons can show the text in the tile attribute on hover when viewed on computers. These are turned on globally.
Enter the absolute URL to the social media site or relevent page and check the box if the link is to open in a new window.
There is an option to add an email link with fields for email address, subject and content. The link can be set up with the website email address and subject for visitor feedback or as a way for visitors to email a friend.
In the latter case, the email field is left blank and the subject line entered as something like "Check Out This Web Page"
The content field can have the URL of the web page. It will appear as text on the email but will be converted to a clickable hyperlink at the receiving end.
The background of the navigation container can be adjusted for color and opacity and the spacing of the tabs adjusted for different devices - computer, tablet and mobile phone.
The navigation can be placed at a preset distance from the top or bottom of the browser window.
The scroll distance before the navigation fades in is set in pixels.
The fade animation ensures a smooth fade in and the fade in time is set in milliseconds.
The navigation should be brought to the front or set to "Always On Top" using the Arrange menu or the Metrics inspector prior to publishing the page.