Lassen Sie uns anzeigen: none elem slideRight ();

Question

Feb 22, 2015, 08:29 PM

Lassen Sie uns anzeigen: none elem slideRight ();

Ich versuche, in CSS ein Menü zu erstellen, in dem nur Symbole als Schaltflächen angezeigt werden. Wenn Sie jedoch den Mauszeiger darüber halten, muss der Text neben dem Symbol angezeigt werden. Die Sache ist, dass ich den Effekt animieren möchte, den Text mit einem slideDown () -ähnlichen Effekt anzuzeigen, nur dann rechts.

Der HTML-Code (der einige Schriftarten für die Symbole enthält):

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

The 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;
}

Ich habe auch ein @ eingefü JSFiddle.

Die ideale Lösung wäre reines CSS, aber ich bin mir nicht sicher, ob das möglich ist. Wenn dies nicht möglich ist, wäre eine Lösung mit jQuery ein gutes Ergebnis.