Introduction

SMover (Social Media hover) is a jQuery plugin that hides social media icons away, whilst allowing super smooth and easy access to them when required. Whilst the main use for this plugin is for social media icons, it has other uses too.

Download Fork on GitHub

Demo

SMover in it's most basic form can be used out of the box for social media links, hover over the title:

Other Uses

SMover is so basic that it can be used for many purposes, in this instance we're hiding away icons that signify actions on a document.

We've changed a few options here, we've changed fillerText to the string ' to ' and the mouseoutDelay has increased to 3000 milliseconds, hover over the title:

Installation

Installation is really easy, simply define your HTML like this:

<div class="smover">
	<span>Share Page</span>
	<ul style="display: none;">
		<li><a title="Delicious" href="#"><img alt="Share with Delicious" src="/path/to/icon/delicious.png"></a></li>
		<li><a title="Digg" href="#"><img alt="Share with Digg" src="/path/to/icon/digg.png"></a></li>
		<li><a title="Facebook" href="#"><img alt="Share with Facebook" src="/path/to/icon/facebook.png"></a></li>
		<li><a title="StumbleUpon" href="#"><img alt="Share with StumbleUpon" src="/path/to/icon/stumbleupon.png"></a></li>
		<li><a title="Twitter" href="#"><img alt="Share with Twitter" src="/path/to/icon/twitter.png"></a></li>
	</ul>
	<div class="clearfix">&nbsp;</div>
</div>

And now we'll need to initialise the plugin against our HTML:

$('.smover').smover();

Customisation

SMover is customisable! Use the following options to modify how SMover works:

Options

titleElement - option, default: 'span'
Sets the title element selector, of which the title will change depending on which icon is hovered. Must be a child of the main SMover element.

linksElement - option, default: 'ul'
Sets the links element selector, used to fade in and out during hover.

fillerText - option, default: ' on '
The string of which is used to fill the default title and the hovered item title.

mouseoutDelay - option, default: 500
The length of time (in milliseconds) the SMover element will remain open after the mouse out event has fired.

Feedback

We're all on the planet to learn, if you feel improvements can be made to SMover drop me an email, tweet me or fork the project and put in a pull request. If you want to report a bug head on over to the GitHub issues page.

With thanks

Many thanks to Lenka Melcakova and PixelMixer for use of icons.