SMover, a jQuery Social Media Plugin

SMover (Social Media hover, pronounced smother) is a jQuery plugin that hides social media icons away, whilst allowing super smooth and easy access to them when required. It’s also really small, just 4kb compressed!

SMover hides away social media (in fact, any) icons and only displays them when the user hovers on a call to action, there are no labels with SMover, however the links title is used to signify the links purpose, check out the demo for a hands on session.

Usage

First we need to need to include the following JavaScript files, SMover depends on jQuery and hoverIntent, both are provided.

<script type="text/javascript" src="http://example.com/js/smover/jquery.js"></script>
<script type="text/javascript" src="http://example.com/js/smover/hoverintent.js"></script>
<script type="text/javascript" src="http://example.com/js/smover/smover.js"></script>

Now we have to specify our HTML structure, SMover is customisable so you don’t have to use the same structure as I have below.

<div id="share-page">
    <span>Share Page</span>
    <ul style="display: none;">
        <li><a title="Digg" href="#"><img alt="Share with Digg" src="http://example.com/images/social-icons/digg.png"></a></li>
        <li><a title="Facebook" href="#"><img alt="Share with Facebook" src="http://example.com/images/social-icons/facebook.png"></a></li>
        <li><a title="StumbleUpon" href="#"><img alt="Share with StumbleUpon" src="http://example.com/images/social-icons/stumbleupon.png"></a></li>
        <li><a title="Twitter" href="#"><img alt="Share with Twitter" src="http://example.com/images/social-icons/twitter.png"></a></li>
    </ul>
</div>

And now we can initiate our SMover plugin.

$(document).ready(function() {
    $('#share-page').smover();
});

And that’s all that’s required to get your SMover plugin going, you can see how this plugin will function be visiting the demo page.

Options

$(document).ready(function() {
	$('#smover1, #smover2').smover({
		titleElement  : 'span', // title selector, must be child of smover element
		linksElement  : 'ul',   // links selector, must be child of smover element
		fillerText    : ' on ', // the string that joins the title text and link title
		mouseoutDelay : 500     // hide delay after the mouseout event
	});
});

Commit History, Issues and Suggestions

SMover is hosted on GitHub, you can view the commit history there as well as raise an issue or suggestion.