SO - 25852929

by Arun P Johny

HTML

<div class="share-button">
    <a href="#" class="social-toggle">Share</a>
    <div class="social-networks">
        <ul>
            <li class="social-twitter">
                <a href="http://www.twitter.com">T</a>
            </li>
            <li class="social-facebook">
                <a href="http://www.facebook.com">F</a>
            </li>
            <li class="social-gplus">
                <a href="http://www.gplus.com">G+</a>
            </li>
        </ul>
    </div>
</div>

<div class="share-button1">
    <a href="#" class="social-toggle">Share1</a>
    <div class="social-networks">
        <ul>
            <li class="social-twitter">
                <a href="http://www.twitter.com">T</a>
            </li>
            <li class="social-facebook">
                <a href="http://www.facebook.com">F</a>
            </li>
            <li class="social-gplus">
                <a href="http://www.gplus.com">G+</a>
            </li>
        </ul>
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
body {
    font-family:sans-serif;
    background:#333;
}
.share-button1 {
    margin: auto;
    position: absolute;
    top: 0;
    left: 300px;
    bottom: 0;
    right: 0;
    width:6em;
    height:2em;
    line-height:2em;
}
.share-button {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width:6em;
    height:2em;
    line-height:2em;
}
.social-toggle, .social-toggle1 {
    display:block;
    font-weight:bold;
    font-size:90%;
    text-align:center;
    text-transform:uppercase;
    transition:all 0.25s;
    color:rgb(200, 200, 200);
    background:rgba(200, 200, 200, .05);
    border: 2px solid rgb(200, 200, 200);
}
.social-toggle:hover {
    background:rgb(200, 200, 200);
    color:#333;
}
.no-js .social-toggle, .no-js .social-toggle:hover {
    cursor: default;
    border:none;
    background:transparent;
    color:rgb(200, 200, 200);
    pointer-events:none;
}
.social-networks {
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0) translateY(-190px);
    transform: scale(0) translateY(-190px);
    opacity: 0;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    margin-left: -45%;
    /* stops flickering */
    -webkit-backface-visibility: hidden;
}
.social-gplus {
    background: #e34429;
}
.social-twitter {
    background: #6cdfea;
}
.social-networks.open-menu, .no-js .social-networks {
    -webkit-transform: scale(1) translateY(-90px);
    transform: scale(1) translateY(-90px);
    opacity:1;
}
.social-networks ul {
    position:relative;
    top:0;
    left:0;
    width: 180px;
    height: 40px;
    color: #fff;
    background: #3b5998;
    margin: auto;
    padding: 0;
    list-style: none;
}
.social-networks ul:after {
    content:'';
    display: block;
    width: 0;
    height: 0;
    position:...

JavaScript

$('.social-toggle').on('click', function () {
    $('.social-networks').not($(this).next()).removeClass('open-menu')
    $(this).next().toggleClass('open-menu');
});

$(document).click(function (e) {
    if (!$(e.target).hasClass('social-toggle')) {
        $('.social-networks.open-menu').removeClass('open-menu')
    }
})