Oggi vedremo assieme un fantastico menu animato realizzato in CSS3. E’ davvero un menu creativo perché associa un’icona ad un titolo ed un sottotitolo. Il tutto viene animato con diversi passaggi e soluzioni. A questa animazione come visto la settimana scorsa sarà possibile associale dei font con la tecnica @Font Face.
Ma andiamo a vedere in evidenza questo menu.
HTML
La struttura html del menu sarà una lista in cui ogni elemento è costituito dall’icona e un div contenente il titolo principale e il titolo secondario:
<ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul>
Per le icone stiamo utilizzando dei caratteri/simboli @fontface
CSS
Lo stile del css sarà uguale per tutti.
@font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols/websymbols-regular-webfont.woff') format('woff'),
url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Di seguito troverete la lista delle varie animazioni che potete scaricare a questo link
ESEMPIO 1
ESEMPIO 2
ESEMPIO 3
ESEMPIO 4
ESEMPIO 5
ESEMPIO 6
ESEMPIO 7
ESEMPIO 8
ESEMPIO 9
ESEMPIO 10
Fonte: codrops
