Transition CSS3 menu a comparsa

K

Kirsolo

Utente Attivo
17 Gen 2013
171
0
0
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

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
M Animate Transition css3 HTML e CSS 1
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5
C Problema mootools FX.transition... Javascript 2
J Image Rotation with new transition and dissolving effect Javascript 0
I [CSS3]Problema slideshow multiple HTML e CSS 2
momeraths CSS3 Gradients HTML e CSS 2
xone [Offro] Realizzazione template html5 css3 creati da zero Offerte e Richieste di Lavoro e/o Collaborazione 0
greven [WordPress] [CSS3] Inserire Hover Effect sul menù WordPress 10
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
M Maschere di Immagini in CSS3 ovvero: questo sconosciuto HTML e CSS 1
V Marquee CSS3 HTML e CSS 7
R Transizione immagine css3 HTML e CSS 1
A Controllare l'animazione di una skills bar realizzata con i keyframes css3 Javascript 1
novello88 [css3] animated position HTML e CSS 0
A Menu css3 HTML e CSS 1
zighy JM css3 image effect plugin..chi li conosce,come si usano? HTML e CSS 6
K Nascondere i css3 ai vecchi broswer usando @media HTML e CSS 0
voldemort HTML5 e CSS3: ancora troppo presto? HTML e CSS 3
B [VENDO] Libri web design nuovi, usciti negli ultimi mesi. (wordpress e html5/css3) Altri Annunci 0
J Super Cool and Great Button Resources and Tutorials with CSS3 Javascript 0
MarcoGrazia [CSS3] Bottoni arrotondati e non con gradiente HTML e CSS 0
SolidSnake4 info css3 HTML e CSS 1
SolidSnake4 css3 webfont HTML e CSS 1
T problemi con dati menu a tendina HTML e CSS 2
A menu a tendina php PHP 1
M Accordion menu e posizione div HTML e CSS 0
F Menu responsive larghezza schermo HTML e CSS 2
G Colorare menu select attraverso ricerca php PHP 0
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0
S spostare il pulsante menu dropdown HTML e CSS 8
F Dropdown menu con tabella PHP 33
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
A [WordPress] Menu bar WordPress 0
W [WordPress] Non si vedono le categorie da aggiungerle al Top Menu WordPress 3
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
M [PHP] Creare un menu a tendina con pdo PHP 18
M [Javascript] Caricamento menu da file esterno Javascript 8
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
andreas88 [PHP] menu PHP 15
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1

Discussioni simili

Alto Basso