Skip to content

Instantly share code, notes, and snippets.

@craigmartin
Created August 2, 2011 11:21
Show Gist options
  • Save craigmartin/1120023 to your computer and use it in GitHub Desktop.
Save craigmartin/1120023 to your computer and use it in GitHub Desktop.
A jQuery plugin for social network links or any other links .. (as used for Van Specialties)
(function ($) {
var script, css, html, offset, options;
script = $('script[src$="network.js"]');
// Set options.
options = {
style: 'dark'
};
if (script.data('style')) {
options.style = script.data('style');
}
// Create CSS.
css = $('<link rel="stylesheet" href="https://s3.amazonaws.com/vanspec/assets/css/network.css" />');
// Create HTML.
html = $(
'<div class="network">'
+ '<nav>'
+ '<ul>'
+ '<li>'
+ '<em>Elsewhere</em>'
+ '<ul>'
+ '<li><a href="http://vanspecialties.tumblr.com">Tumblr</a></li>'
+ '<li><a href="http://twitter.com/VanSpecialties">Twitter</a></li>'
+ '<li><a href="http://www.facebook.com/pages/Van-Specialties/139123866135833">Facebook</a></li>'
+ '</ul>'
+ '</li>'
+ '<li>'
+ '<em>Inspirations</em>'
+ '<ul>'
//+ '<li><a href="http://www.sportsmobile.com/index.html">Sports Mobile</a></li>'
+ '<li><a href="http://adi-mobilehealth.com">ADI</a></li>'
+ '<li><a href="http://gleemachine.co">Glee Machine</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
+ '</nav>'
+ '<div class="label">'
+ '<span>Van Specialties</span><span class="pointer"></span>'
+ '</div>'
+ '</div>'
)
.addClass(options.style)
.hide()
;
// Inject elements.
$('head').append(css);
$('body').append(html);
// Set up element.
$(window).load(function () {
html.show();
html.find('.label').click(toggle);
// Find and apply offset.
offset = html.find('nav').outerHeight() * -1;
html.css('top', offset - 10);
close();
});
function open() {
html.animate({top: 0}, {duration: 500, easing: 'swing'})
.removeClass('closed')
.addClass('opened')
;
}
function close() {
html.animate({top: offset}, {duration: 500, easing: 'swing'})
.removeClass('opened')
.addClass('closed')
;
}
function toggle() {
if (parseInt(html.css('top')) < 0) {
open();
} else {
close();
}
}
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment