Responsive Scroll Link Sidebar
EverWeb Widgets
Description
The sidebar can hold up to one hundred links which can be configured to open internal or external pages and in a new window if required. It can be used where a fairly large number of links need to be available but not take over the page layout.
The sidebar height is determined by the main container height. Any overflow of links is hidden and revealed on scroll.
The sidebar heading is optional and the links can be zebra striped if required. The up/down indicators are also optional.
As the browser/device width is reduced, the links switched to full height below the content area. The break point at which this change takes place can be set for tablet in landscape mode, tablet in portrait mode, phone in landscape mode or phone in portrait mode.
Content Area
The main content area has options for a heading, an image with alt text and a text block with options for using a styled span.
Adding Links
Links are added using the EverWeb Widget API's Assets List. This is the same as used for adding images to slideshows but is adapted to add other types of items.
To add a link, click the Add button and select the entry which appears in the list to add the link text and the URL.
Click the entry again and it will become editable to give it a unique name.
File Paths
The URLS are created using relative or absolute file paths. Follow the "File Paths" link below for more info about links and how to find the correct file path when using directories.
Auto Scroll To Top
These links have an option to auto scroll back to the top when the last link is reached. This function is turned on by checking a box and adds a jQuery plugin to create the animation.
When the function is turned on, a bottom bar is added to the list - just below the last link. This has three stars and its function is to act as a buffer and to show that the bottom of the list has been reached. The background and the star colors can be adjusted.