Esto es lo que se me ocurre
Código CSS:
Ver original.footer-social-links {
position: absolute;
max-width: 0;
overflow: hidden;
white-space: nowrap;
webkit-transition: 5s all;
-moz-transition: 5s all;
-ms-transition: 5s all;
-o-transition: 5s all;
transition: 5s all;
}
.footer-social-links.show {
width: auto;
max-width: 1000px;
webkit-transition: max-width 5s;
-moz-transition: max-width 5s;
-ms-transition: max-width 5s;
-o-transition: max-width 5s;
transition: max-width 5s;
}
Código Javascript
:
Ver original<div class="footer-social-links">
<a href="javascript:window.open('http://www.facebook.com/share.php?u=','','width=600,height=400,left=50,top=50,toolbar=yes');void 0"><i class="fa fa-facebook"></i></a>
<a href="javascript:window.open('https://twitter.com/?status=','','width=600,height=400,left=50,top=50,toolbar=yes');void 0"><i class="fa fa-twitter"></i></a>
<a href="javascript:window.open('http://www.linkedin.com/shareArticle?url==','','width=600,height=400,left=50,top=50,toolbar=yes');void 0"><i class="fa fa-linkedin"></i></a>
<a href="javascript:window.open('https://plus.google.com/share?url=','','width=600,height=400,left=50,top=50,toolbar=yes');void 0"><i class="fa fa-google-plus"></i></a>
<a href="javascript:window.open('http://pinterest.com/pin/create/button/?media=','','width=600,height=400,left=50,top=50,toolbar=yes');void 0"><i class="fa fa-pinterest"></i></a>
</div>
<div id="header">
<nav>
<ul class="nav">
<li><a href="">SHARE</a>
</li>
</ul>
</nav>
</div>
<script>
document.querySelector('.nav a').addEventListener('mouseover', function() {
document.querySelector('.footer-social-links').classList.toggle('show');
}, false);
document.querySelector('.nav a').addEventListener('mouseout', function() {
document.querySelector('.footer-social-links').classList.toggle('show');
}, false);
</script>