Menu oculto en horizontal

[macaluan]

Buenas tardes,
tengo unos botones de redes sociales puestos en horizontal tal que así:

Código HTML:

<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>
 

Ahora lo que quiero hacer es ocultarlos en otro botón como el de abajo y que salgan en horizontal con retardo uno tras otro al hacer hover. No se si me explico. Imagino que es algo sencillo pero llevo atascado toda la tarde

Código HTML:

<div id="header">
    <nav>
        <ul class="nav">
            <li><a href="">SHARE</a>
            </li>
        </ul>
    </nav>
</div>
 

[mpozo]

Esto es lo que se me ocurre

Código CSS:

.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:

<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>
 

[macaluan]

Gracias mpozo, lo estoy probando y no me funciona, es posible que exista algún error?, estoy mirando pero en teoría esta bien.

[rodinzon]

que aparezcan al hover no me parece practico, en un movil no se hace hover.. mostrar y ocultar lo logras con los clasicos display:none y display:block y onclick.. los efectos los pones despues con jquery o css