Transition CSS3 menu a comparsa

Kirsolo · 26 Feb 2013

Salve a tutti,
ho un problema che non riesco a risolvere:

Vorrei creare un menù con delle etichette (Home - Chi sono- ecc..) disposte in verticale sul bordo sinistro, una sotto l'altra.

Con transition riesco a far allargare in larghezza (width) l'etichetta e con (height) in altezza; la visione all'inizio è di una serie di etichette con il solo nome del menù, mentre quando passo sopra il mouse con :hover, l'etichetta si allarga e aumenta sia in larghezza che in altezza, nella parte in altezza che compare sotto vorrei metterci del testo cliccabile ( cioè link) che compare solo con l'hover.

Come potrei fare?

Grazie

criric · 27 Feb 2013

Ciao,
io farei cosi

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            ul {
                margin: 0;padding:0;
                float: left;
            }
            ul li {
                width: 200px;
                height:40px;
                border: 1px solid white;
                background-color: red;
                text-indent: 14px;
                line-height: 40px;
                transition:2s;
                overflow: hidden;
            }
            ul li a {
                color:white;
                text-decoration: none;
                font-family: Arial;
                font-size: 1.29em;

            }
            ul li p {
                margin:0;
                padding:0;
                margin-top:-16px;
                text-indent: 24px;
            }
            ul li p a {
                font-size: .81em;
            }
            ul li:hover {
                width: 250px;
                height: 66px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Home</a><p><a href="#">link</a></p></li>
            <li><a href="#">Contatti</a><p><a href="#">link</a></p></li>
            <li><a href="#">Chi siamo</a><p><a href="#">link</a></p></li>
            <li><a href="#">Dove siamo</a><p><a href="#">link</a></p></li>
        </ul>
    </body>
</html>

ovviamente la transition con explorer non funziona

Cerca

Cerca

Transition CSS3 menu a comparsa

Kirsolo

Utente Attivo

criric

Super Moderatore

Discussioni simili