Animiamoci con i CSS!

Buon pomeriggio!

Che cosa vi insegno oggi? Direttamente dalle mie maniche vi insegnerò come realizzare un semplicissimo (ma d'effetto) menù utilizzando solo i fogli di stile e html. Eccolo qui:

Home
Blog
Video
Curriculum
Contatti

Bene, vediamo di cosa abbiamo bisogno:

- conoscenza dei CSS;

- conoscenza di Html;

- immagini png per il nostro menu.

Iniziamo con la parte più semplice: il codice html. Nella prossima lezione vedremo come attriburie gli stili (css) ed ottenere il risultato desiderato.

Il codice html senza stili del nostor menù è il seguente:

<div id="menu">
<ul>
<li><a class="home" href="home.html"><span>Home</span></a></li>
<li><a class="chi" href="about.html"><span>About me</span></a></li>
<li><a class="gallery" href="portfolio.html"><span>Portfolio</span></a></li>
<li><a class="negozio" href="blog.html"><span>Blog</span></a></li>
<li><a class="news" href="contatti.html"><span>Contatti</span></a></li>
</ul> </div>

Cosa significa tutto questo?

- <div></div> è una sorta di "contenitore" che racchiuderà tutto il nostro menù. Al div è stato dato un id (identificatore) che ci servirà per dargli uno stile;

- <ul></ul> è la sintassi per definire un elenco ordinato. Un elenco si apre con il tag <ul> e si chiude con il tag </ul>. Gli elementi sono rappresentati dai tag <li>;

- <a href=""></a> è la sintassi per definire i link. Il link va inserito all'interno delle virgolette. Ad ogni link è stata data una classe (class="...") che ci servirà per applicare gli stili;

- <span>Home</span>, ecc sono le varie voci del menù.

Come sarebbe questo menù senza stili? Vediamolo subito:

Home
About me
Portfolio
Blog
Contatti

Una semplice lista di voci cliccabili, senza immagini e senza animazione al passaggio del mouse (ora ha preso lo stile del css del blog, per questo li vedete di colore verde e con il simbolo >>).

La prossima settimana vedremo come applicare gli stili e completare il menù. Continuate a seguirci!