JSFiddle - React, Tailwind, and code Playground

by infiniteloops

HTML

<div id="social-grid">        
        <span class="social-flyout">Follow Me</span>
        <div class="social-top">
            <span class="facebook">
                <a href="http://facebook.com/theflyphoto">
                </a>
            </span>
            <span class="twitter">
                <a href="http://twitter.com/theflyphoto">
                </a>
            </span>
            <span class="dribble">
                <a href="http://facebook.com/theflyphoto">
                </a>
            </span>
            <span class="tumblr">
                <a href="http://twitter.com/theflyphoto">
                </a>
            </span>
        </div>
</div>

CSS

#social-grid{
    width: 300px;
    height: 35px;
    padding-left: 5px;
    border: 1px dotted #333;
}

.social-flyout{

}

.social-top SPAN{
    margin: 2px;
    display: inline-block;
}

.social-top SPAN:hover{
    background-color: #0CBEB1;
}


.social-top{
    width: 0px;
    height: 35px;
    margin: 0;
    display: inline;
    text-decoration: none;
    color: #92c206;
    font: normal 300 .8em "museo",serif;
}

.social-top .facebook{
    background-image: url(http://theflyphoto.com/images/facebook.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-color: #92c206;
    text-indent: -9999px;
    
}

.social-top .twitter{
    background-image: url(http://theflyphoto.com/images/twitter.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-color: #92c206;
    text-indent: -9999px;
    
}

.social-top .dribble{
    background-image: url(http://theflyphoto.com/images/dribble.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-color: #92c206;
    text-indent: -9999px;
    
}
.social-top .tumblr{
    background-image: url(http://theflyphoto.com/images/tumblr.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-color: #92c206;
    text-indent: -9999px;    
}

JavaScript

$('.social-top').hide();

$('#social-grid').mouseenter(function() {
    $('.social-top').show();
    $('.social-top').stop().animate({
        width: 225
    }, 1000);
});

$('#social-grid').mouseleave(function() {
    $('.social-top').stop().animate({
        width: 0
    }, 1000, function() {
        $('.social-top').hide();
    });

});