Simple social sharing dropdown

_icons.sass

@font-face {
	font-family: 'sonima';
	src: url('fonts/sonima.eot');
}
@font-face {
	font-family: 'sonima';
	src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'),
		 url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAApYAAoAAAAAChAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAABqAAAAagcC0h9k9TLzIAAAeUAAAAYAAAAGAIIweKY21hcAAAB/QAAAB8AAAAfOtSnmlnYXNwAAAIcAAAAAgAAAAIAAAAEGhlYWQAAAh4AAAANgAAADYAdFzyaGhlYQAACLAAAAAkAAAAJAPiAexobXR4AAAI1AAAACwAAAAsDksADW1heHAAAAkAAAAABgAAAAYAC1AAbmFtZQAACQgAAAEwAAABMO/PmCdwb3N0AAAKOAAAACAAAAAgAAMAAAEABAQAAQEBB3NvbmltYQABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLZviU+HQFHQAAAJcPHQAAAJwRHQAAAAkdAAAGlxIADAEBBw0PERQZHiMoLTI3c29uaW1hc29uaW1hdTB1MXUyMHVFNjAwdUYwMDJ1RjAwNHVGMDgydUYwOTl1RjA5RXVGMEQ0AAACAYkACQALAgABAAQABwAKAA0AiAE7AccCUAMMBBoF4fyUDvyUDvyUDvuUDvhE9xQVdIt3gnx8CPtr9gWMj4uQi4+Lj4uQio8I92v2BZp8n4Kii7eLr6+Lt4u3Z69fi1+LZ2eLX4uHi4aMhwj7ayAFfJp3lHSLX4tnZ4tfi1+vZ7eLoouflJqaCPdrIAWKh4uGi4eLX69nt4u3i6+vi7eLt2evX4sIDmf33feCFYuuf6lypHKkbJhoi2iLbX5ycnJyfm2LaItnmG2kcqRyqX+ui66LqpekpKSkl6mLrwj3JvuCFYuBiIOEg4OEg4eBi4GLgo+Ekggp7QVpc2WAYYtwi3GQcpVylnaZeZ15nXyhgaSAo4ali6eLppCllqSVpJqgnZ2dnaCZpJYIpJalkKaLpoulhqSApIChfZ15nXmZdpVylnKQcYtwi2F/ZXRpCO0pBZKEjoKLgQgO95SLFYaLh42Hjgj7RvdABYmNiY2Hj4iOhpGDlISUhZWFlIWVhpaHmYaYiZiLmIu1l6yjoqOjrZe2i5aLl4mYhwiXh5aFloSWhJSFkoWThJKFkoSSkpKRk5KSkZSRlpKWkpaRl4+Yj5eNlou2i61/o3MIo3SXaothi2F1YGBgCPtG+0AFh4iHiYaLCA74CfdpFZLKUouLqgWLlI2Sjo6Oj5KNlYsIq4uLylmLBW6LdoR+fX99hXeLcAiLZmWLi0yxi4v7SdWLi/dJvYsFzfckFYv7pwWLdYN3e3t7e3eDdYsI+6eLBXWLd5N7m3ubg5+LoQiL96cFi6GTn5ubm5ufk6GLCPeniwWhi5+Dm3ube5N3i3UIDmf4Y/f7FX54fHt5fouIi4eLhotyh3OEcoRygHR8dHx0end2end5cn5vgG6BbIZqi1iLW5hhpwiRipOLk4u2i7GYrKV3jHqRe5d7l4CahZ2RipGLkYuTi5OMk412j3mWfZx9nISei6IIi4wFmIOZiJqKfpOBloSZg5iHmoubi5yQmpOZom+ndKx6rHqvgrCJipKKkouSi6WUoJ2dCJ2doZSki6aLoYKed5+Pn5OdlYR2fnp3f5yMnZCdkwgO+wH3AuYVi3yFfoGBgIB+hnyLfIt+kICWgJWGmIuai5uQmJaVlpaYkJqLmouYhpaAlYGRfot7CPcmaBWLhoqGh4iIh4aJhosIZIsFhouHjIiOh46Kj4qQh7d5sGyqbKpmnWCPhouHjYiOiI+Jj4uQCIuxBYuRjY+Pj46Oj42QiwiNiwWpiKiDp3+nfqR5oHahdZxzmG+Yb5NujWwI9yaLFYyGiYaHh4iHhoqGiwhiiwWGi4eMh4+IjomPi5CJtIGyeq96sHWrcKZwp2uhZpxmnGSUYo6Gi4eNiI6Ij4mPi5AIi7QFi5CNj4+Pjo6PjZCLCIyLBb2Iu4C4d7l2tG+uaK9np2OfXZ9dl1yNWQgO91afFYuEioSJhQj7AYsFeYt7kHyWfZaBmYacj5SSkpORlJKVj5WPlY6WjZWMlI2Wi5WLkYuQi46LjIqOiZCICJCIjoiMio2KjomPiI+HjomNiY2KjoiOiI+IjYiNiYyIjYiOiI2IjYeMiIyIjIiLhwiMh4yHi4cIN/AVXolng258CIv3EAWfdaV/q4uRi5KMkoyHf4mDi4aLfpF9l3wIvPcmFYt4h3uDgIN/fYV5i4GLgo6CkIKQhJGFk4WThZSHlYaViJWJlYmUiZWLlIudkJuVmAiVmJmSnIuYi5aHlYOWg5OBkH+Rf5B/jn6Ofox/i4AI96ylFYv7ZwWLdYN3e3t7e3eDdYsI+xqLBZKZj5qLm4uXiZeHloeWhZOFkoSShZKDkoSRhJGFkISPhpGHkIeRiZGLkIuSjZKPkQiQkZCRkZCRkZKRkZKRkZCUkJaPlo2Yi5mLmYmYhpmGmYOWgpSKjIqMiYyKjImMi4sIioyKjIqMioyKjYqNCLGLsp37EYsFcYtziHeDd4R5fn15i6OTn5qcm5yek6OLCPeniwWhi5+Dm3ube5N3i3UIi29Ci4vUZouLQkKLi2fUi4tBsIuL1dSLBQ74lBT4lBWLDAoAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw1AHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGgAAAAWABAAAwAGAAEAIOYA8ALwBPCC8JnwnvDU//3//wAAAAAAIOYA8ALwBPCC8JnwnvDU//3//wAB/+MaBBADEAIPhQ9vD2sPNgADAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAALM1CEVfDzz1AAsCAAAAAADPqo4dAAAAAM+qjh0AAP/bAgAB4AAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAACwAAAAAAAAAAAAAAAAEAAAACAAAAAdwAAAIAAAACAAAAAdwADQGTAAACAAAAAABQAAALAAAAAAAOAK4AAQAAAAAAAQAMAAAAAQAAAAAAAgAOAEAAAQAAAAAAAwAMACIAAQAAAAAABAAMAE4AAQAAAAAABQAWAAwAAQAAAAAABgAGAC4AAQAAAAAACgAoAFoAAwABBAkAAQAMAAAAAwABBAkAAgAOAEAAAwABBAkAAwAMACIAAwABBAkABAAMAE4AAwABBAkABQAWAAwAAwABBAkABgAMADQAAwABBAkACgAoAFoAcwBvAG4AaQBtAGEAVgBlAHIAcwBpAG8AbgAgADEALgAwAHMAbwBuAGkAbQBhc29uaW1hAHMAbwBuAGkAbQBhAFIAZQBnAHUAbABhAHIAcwBvAG4AaQBtAGEARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('woff');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'sonima';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
	content: "\f002";
}
.icon-heart:before {
	content: "\f004";
}
.icon-facebook-square:before {
	content: "\f082";
}
.icon-twitter:before {
	content: "\f099";
}
.icon-rss:before {
	content: "\f09e";
}
.icon-google-plus-square:before {
	content: "\f0d4";
}
.icon-share:before {
	content: "\e600";
}

_share-dropdown.sass

.share {
    position: relative;

    &:hover {
        .sub-menu {
            display: block;
        }
    }

    .sub-menu {
        top: 125%;
        margin-left: -4rem;
        width: 8rem;
        font-size: 1.2rem;

        i {
            margin-right: 2px;
        }
    }
}

.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0;
    margin-left: -7rem;
    padding: 0.5rem;
    width: 14rem;
    list-style-type: none;
    background: $dropdown-background;
    font-size: 1rem;
    z-index: 20;

    &:before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -12px;
        width: 0; 
        height: 0; 
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid $dropdown-background;
    }

    .menu-item {
        padding: 0.5rem;
        border-bottom: 1px solid darken($dropdown-background, 10%);

        &:last-child {
            border-bottom: none;
        }
    }
}

template.php

<span class="share">
    <i class="icon-share"></i>
    <ul class="sub-menu">
        <li class="menu-item"><a href="http://twitter.com/intent/tweet?text=<?php the_title(); ?> <?php the_permalink(); ?>" onclick="window.open(this.href, 'twitterwindow','left=20,top=20,width=600,height=300,toolbar=0,resizable=1'); return false;"><i class="icon-twitter"></i>Tweet this</a></li>
        <li class="menu-item"><a href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php the_title(); ?>&amp;p[summary]=<?php the_excerpt(); ?>&amp;p[url]=<?php the_permalink(); ?>&amp;p[images[0]=[IMAGE_GOES_HERE]" onclick="window.open(this.href, 'facebookwindow','left=20,top=20,width=600,height=700,toolbar=0,resizable=1'); return false;"><i class="icon-facebook-square"></i>Share on Facebook</a></li>
        <li class="menu-item"><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open(this.href, 'googlepluswindow','left=20,top=20,width=600,height=700,toolbar=0,resizable=1'); return false;"><i class="icon-google-plus-square"></i>Share on Google+</a></li>
    </ul>
</span>

<ul class="post-social-share__list">
    <li><a class="button button--twitter" href="http://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title()); ?>%20<?php the_permalink(); ?>" onclick="window.open(this.href, 'twitterwindow','left=20,top=20,width=600,height=300,toolbar=0,resizable=1'); return false;"><svg viewBox="0 0 32 32" class="svg-icon svg-twitter-icon"><use xlink:href="#twitter"></use></svg>Tweet</a></li>
    <li><a class="button button--facebook" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(get_the_title()); ?>&amp;p[summary]=<?php echo urlencode(get_the_excerpt()); ?>&amp;p[url]=<?php the_permalink(); ?><?php echo ( has_post_thumbnail() ? '&amp;p[images[0]=[' . wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' ) . ']]' : ''); ?>" onclick="window.open(this.href, 'facebookwindow','left=20,top=20,width=600,height=700,toolbar=0,resizable=1'); return false;"><svg viewBox="0 0 32 32" class="svg-icon svg-facebook-icon"><use xlink:href="#facebook"></use></svg>Share</a></li>
    <li><a class="button button--google" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open(this.href, 'googlepluswindow','left=20,top=20,width=600,height=700,toolbar=0,resizable=1'); return false;"><svg viewBox="0 0 32 32" class="svg-icon svg-googleplus-icon"><use xlink:href="#googleplus"></use></svg>Share</a></li>
</ul>