JSFiddle - React, Tailwind, and code Playground

Get Social! Bar

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div class="getSocial_wrap"></div>

<div id="pageStyles">
    <h1><a href="">Get Social!</a></h1>
    <ul>
        <li><span>The jQuery <a href="">Get Social!</a> bar is an elegant plugin that adds the ability of showing Social Media links in a sleek and innovative style.</span></li>
        <li><span>Set the amount of Social Icons to show, Social Site links, Tool-Tip text on hover, and speed animations easily!</span></li>
    </ul>

<p>Unless otherwise noted, this content is licensed under a <a href="http://creativecommons.org/licenses/by/3.0" target="_new">Creative Commons Attribution 3.0 License</a>.<br />
Visit <a href="http://jenniferperrin.com/blog" target="_new">www.jenniferperrin.com</a> for more information on Get Social!</p>
</div>

CSS

body:before { /* top shadow - just for fun */
    content: "";
    position: fixed;
    top: -10px;
    left: -10px;
    width: 110%;
    height: 10px;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -o-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
}
body { background: url("http://jenniferperrin.com/image/background.gif"); }

/* --- Page Styles --- */
#pageStyles {
    width: 500px;
    margin: 10px auto;
}

#pageStyles h1 a {
    display: block;
    margin: 0 0 15px 80px;
    font-size: 100px;
    font-family: 'Yanone Kaffeesatz';
    color: rgba(255,255,255,0.2);
    text-decoration: none;
}
#pageStyles h1 a:hover {
    color: rgba(255,255,255,0.3);
}

#pageStyles p {
    margin: 10px 0 0 21px;
    font-family: 'Yanone Kaffeesatz';
    font-size: 14px;
    color: rgba(255,255,255,0.3);
}

#pageStyles a {
    color: #d79800;
    text-decoration: none;
}
#pageStyles a:hover {
    color: #bf4c24;
}

#pageStyles ul {
    list-style: none;
    font-family: 'Yanone Kaffeesatz';
    padding: 0;
}
#pageStyles ul li {
    padding: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

#pageStyles ul li span {
    font: 20px 'Yanone Kaffeesatz';
    color: #fff;
}

/* --- Get Social! Styles --- */
.getSocial_container {
    position:fixed;
    left:0;
    top:142px;
    width:34px;
    border: 1px solid #dbdbdb;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    z-index:9999;
}


.getSocial_container .getSocial_wrap {
    position:relative;
    z-index:999;
    border:1px solid #ffffff;
    background:#f4f4f4;
    width:100%;
    min-height:34px;
    min-width:30px;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    border-radius: 0 3px...

JavaScript

(function($) {
    $.getSocial = $.fn.getSocial = function(options) {

        var opts, $div_container, $div_wrap, $btn_item, opt_move_total = 0,
            opt_items, opt_show, opt_move, opt_speed, opt_position, opt_skin, counter, $all_icons, $span_caption, $btn_item_arr = new Array;

        opts = $.extend({}, $.fn.getSocial.defaults, options);
        opt_items = opts.items;
        opt_show = opts.show;
        opt_move = opts.move;
        opt_speed = opts.speed;
        opt_position = opts.position;
        opt_skin = opts.skin;

        opt_move = isNaN(opt_move) || opt_move == '' ? $.fn.getSocial.defaults.move : opt_move;

        counter = 0;

        $div_container = $('<div />').addClass('getSocial_container');

        if (opt_skin != 'clear') {
            $div_container.addClass(opt_skin);
        }
        if (opt_position == "right") {
            $($div_container).addClass('right');
        }
        if (opt_position == "top") {
            $($div_container).addClass('top');
        }
        if (opt_position == "bottom") {
            $($div_container).addClass('bottom');
        }

        $div_wrap = $('<div />').addClass('getSocial_wrap');
        $($div_container).append($div_wrap);

        for (key in opt_items) {
            if (opt_items[key] != "") {

                $btn_item_arr[key] = $('<a />').attr('rel', 'getSocial_' + key).hover(

                function() {
                    var $el = $('#' + $(this).attr('rel')).show();
                    if (opt_position == "right") {
                        $el.stop().animate({
                            right: '40px',
                            opacity: 1
                        }, {
                            duration: 500
                        });
                    } else if (opt_position == "left") {
                        $el.stop().animate({
                            left: '40px',
                            opacity: 1
                        }, {
                      ...