Vamos exibir: nenhum elem slideRight ();

Question

Feb 22, 2015, 08:29 PM

Vamos exibir: nenhum elem slideRight ();

Estou tentando criar um menu em CSS, onde apenas ícones são visíveis como botões, mas quando você passa o mouse sobre eles, o texto ao lado do ícone deve ser mostrado. O problema é que eu quero animar o efeito de mostrar o texto com um efeito de slideDown (), só então para a direita.

O HTML (que inclui fontawesome para os ícones):

<body>
<nav>
    <ul>
        <li><a href="#"><i class="fa fa-home"></i><span>Home</span></a>
        </li>
        <li><a href="#"><i class="fa fa-users"></i><span>Team</span></a>
        </li>
        <li><a href="#"><i class="fa fa-comments"></i><span>Management</span></a>
        </li>
        <li><a href="#"><i class="fa fa-cog"></i><span>Settings</span></a>
        </li>
        <li><a href="#"><i class="fa fa-envelope"></i><span>Mail Jobs</span></a>
        </li>
    </ul>
</nav>
</body>

O CSS:

nav {
    position:fixed;
    top:20px;
    background:#701313;
    border-radius:0 30px 30px 0;
    font-family:'Open Sans', sans-serif;
}
nav ul {
    margin:0px;
    padding:0px 20px;
    width:56px;
}
nav ul li {
    font-size:23px;
    display:block;
    width:3000px;
    margin:40px 0;
}
nav ul li a {
    background:#2e2e2e;
    border-radius: 30px;
    padding:15px 17px;
    color:#FFF;
    text-decoration: none;
}
nav ul li a:hover span {
    display:inline;
}
nav ul li i {
    font-size:28px !important;
}
nav ul li span {
    display:none;
    padding:0 20px;
}

Eu também incluí umJSFiddle.

A solução ideal seria CSS puro, mas não tenho certeza se isso é possível. Portanto, se não for possível, uma solução com jQuery seria um bom resultado.