CSS: aggiungere dinamicità ai menu di navigazione con le transizioni

  • CSS
  • Gabriele Romanato

Realizzare un menu dinamico con i soli CSS non era possibile prima dell'introduzione delle animazioni e transizioni CSS. Infatti qualsiasi cambiamento nello stato degli elementi avveniva in modo repentino, senza la possibilità di intervenire ad esempio tra lo stato :link e lo stato :hover dei link. Oggi fortunatamente le cose sono cambiate.

Se ad esempio abbiamo il seguente menu HTML5:


<nav id="menu">
    <strong>Home</strong>
    <a href="#">About</a>
    <a href="#">Contacts</a>
</nav>

Possiamo modificare dinamicamente i bordi superiore ed inferiore di ciascun link e la quantità di padding verticale quando l'utente passa col mouse sopra le voci del menu. Ovviamente useremo le transizioni CSS:


#menu {
    display: block;
    height: 5em;
    overflow: hidden;
}

#menu strong {
    float: left;
    border-top: 2em solid;
    padding-top: 1em;
    padding-bottom: 0.5em;
    border-bottom: 0.5em solid;
}

#menu a {
    float: left;
    margin: 0 1em;
    color: #08c;
    text-decoration: none;
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
     padding-top: 3em;
     padding-bottom: 1em;
     border-top: 0px solid;
     border-bottom: 0px solid;
}

#menu a:hover {
    padding-top: 1em;
    padding-bottom: 0.5em;
    border-top-width: 2em;
    border-bottom-width: 0.5em;
}

L'effetto finale è abbastanza interessante e mostra quanto sia semplice aggiungere un tocco di dinamismo ad un elemento della UI con i soli CSS.

Torna su