Il tutorial comprende ben 10 differenti menu animati con effetti davvero creativi che si attivano al passaggio del mouse. L’idea di base è di avere una semplice composizione di elementi: un’icona, un titolo principale e un titolo secondario, che verranno animati al passaggio del mouse utilizzando solo le transizioni e le animazioni CSS.
Codice HTML di base
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul class="ca-menu"> <ul class="ca-menu"> <li><a href="#"> <span class="ca-icon">A</span></a> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </li> </ul> </ul> ... |
Consultate il tutorial dell’autore o scaricate i file sorgente del codice per vedere come applicare i vari stili relativi ai 10 menu animati. Per vedere dal vivo tutti i menu animati visualizzate la demo.
Demo Download Tutorial | Autore