Super Sidebar is a highly customizable sticky social side menu. It comes with a lot of options that allow it a wide number of different possible configurations while still remaining lightweight and easy to work with.
Here are some of the important features of the sidebar:
- It comes with 45 default brand buttons. + Support to add new buttons.
- It comes with 20 default share services. + Support to add new services.
- It includes 2 default buttons with a special function: mailto and print.
It has support for windows that open over the page.
It comes with 3 default examples: About, Contact and Newsletter.
- The buttons can be grouped in subbars that open on mouseover.
- It has support for Font Awesome which has over 670 icons available that can be used on buttons and customized with CSS. + Support for custom image icons.
- It uses Velocity which makes the animations fast and efficient.
- It has over 30 settings available that can be used to customize it in different ways.
- The buttons and labels can have 4 different shapes: square, round, rounded, rounded-out.
- The button labels have 7 animation effects: fade, slide-out, slide-out-fade, slide-in, slide-out-out, slide-in-in, none.
- The buttons can be connected to or separated from one another. The button labels can be connected to or separated from the buttons.
- The colors for each of the following can be controlled individually: button, button over, button icon, button icon over, label, label text, window header.
It comes with 7 default colors: custom, blue, red, yellow, green, white, black.
+ Any color can be added through the CSS code.
- The subbar can have 3 different positions: under, side and circular.
- The subbar buttons have 5 animation effects: fade, linear-fade, slide, linear-slide, none.
- It can be positioned on the left or right side of the page.
- It can be set to display only after the page has scrolled beyond a certain position.
- It can be set to automatically hide if the browser window is under a certain width.
- The properties of all the animations can be customized.
- Many other options and features.
- Continued support and updates.
Have a look over the preview page for yourself to see the example templates, default buttons and available settings.
Future updates and developments will be listed here and the files will be free for anyone who has purchased the sidebar at any time.2.2 (29 March 2019):
Added a new setting called “animateEngine” to be able to control which engine is used for animations, either “velocity” (default, smoother animations) or “jQuery”.
If using the jQuery option, it is no longer necessary to load the “velocity.min.js” file on the page.
- Added a new setting called “subOpen” to control if subbars are opened on mouseover or on click.
- Fixed a problem that was causing the old name of the setting “hideUnderWidth” to be used, called “hideUnder”, instead of the new name. Maintained backward compatibility for the old name.
Added support for share buttons. Now it is possible to use buttons that will share the page on different services.
Included by default are 20 share services and their respective buttons. It is also possible to dynamically add any number of other services through the settings.
- Added a new setting called “shareServices” to be able to control the settings of the existing share services or add new ones.
- Added a new setting called “shareTarget” to specify how the share window is opened.
Added support for Font Awesome. Now there are hundreds of icons easily available and customizable through CSS.
Support for custom image icons still remains.
Added many new buttons. Now there are over 50 default buttons available.
Using the existing examples, it is possible to add any number of other buttons though the HTML/CSS code.
- Added 2 new buttons with special functions: mailto and print.
- Added a new setting called “hideUnderWidth” to specify if the sidebar should be hidden when the browser window is under a certain width.
- Added a new setting called “showAfterPosition” to specify if the sidebar should be displayed only after the page has been scrolled beyond a certain point.
- Added a new settings called “barAnimate” to specify the animate parameters of the bar with buttons.
- Fixed an issue that was causing the subbars not to be positioned properly in some cases.
- Fixed an issue that was causing the buttons above a subbar not to move properly in some cases.
- Fixed an issue that was causing the labels not to display properly when having multiple spaced words.
- Renamed the “labelAnim” setting to “labelAnimate”. Added backward compatibility support for the former name.
- Renamed the “subAnim” setting to “subAnimate”. Added backward compatibility support for the former name.
- Renamed the “color” setting to “buttonColor”. Added backward compatibility support for the former name.
- Renamed the “overColor” setting to “buttonOverColor”. Added backward compatibility support for the former name.
- Renamed the “shape” setting to “buttonShape”. Added backward compatibility support for the former name.
- Added a new setting called “iconColor” to specify the color of the button icon.
- Added a new setting called “iconOverColor” to specify the color of the button icon on mouseover.
- Added a new setting called “labelColor” to be able to specify the color of the button label independent of the button color.
- Added a new setting called “labelTextColor” to be able to specify the color of the button label text independent of the button icon color.
- Added 2 new default colors: “green” and “white”.
- Renamed the “default” color property value to “custom”. Added backward compatibility support for the former name.
- Added support for the button icon color to be controlled from the CSS code.
- Updated the templates.
- Added new template files that contain different markup code.
- Added a new Readme file in the “Main” folder that explains what the different templates are and gives basic instructions.
- Added 4 default window sizes.
- Added “data-position” and “data-offset” settings to the window panel element to be able to set the position of each window individually apart from the general settings.
- Turned the window shadow on by default.
- Replaced the “RSS” window with the “About us” window.
- Renamed the “img” folder to “images”.
- Fixed an issue that was causing the subbar not to show properly on quick mouseover after mouseout, for linear effects.
- Fixed an issue that was causing the subbar not to close properly, for linear effects, when the cummulative interval time was higher than the animation time.
- For subbar linear effects, moved the interval from the “subAnimate” setting to the “subEffect” setting.
- Made improvements to the form functionality.
- Moved the form status messages to the settings. Default messages are used if no customized messages are supplied.
- Added a new setting called “formData” where you can specify data to be passed to the form. This includes status messages and data to be sent to the processing file on submit.
- Improved the code of the contact and newsletter PHP files.
- Added form support for response/error messages from AJAX and the processing file.
- Removed the “mailTo” setting. The emails for the forms can now be set in the respective PHP files.
- The CSS file is now minified by default. The unminified version is available in the “Sources” folder.
- Added version numbering.
- Updated the guide.
- Updated the main Readme file.
- Updated jQuery to the latest version.
- Updated Velocity to the latest version.
- A series of other small modifications and improvements.