CSS3World Wide Web

Menu Animato in CSS3

By 21 Novembre 2011 Settembre 24th, 2015 No Comments

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