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!