Come creare il menu di Navigazione

Lla navigazione si realizza nel box <div id="navigation">NAVIGAZIONE</div> del nostro file .html. Davanti ogni parola del nostro menu mettiamo il tag a e con questo facciamo i link tra le pagine (es. <a href="#">Home </a>).

Quando dobbiamo scrivere link più complessi creiamo un unordered list <ul> </ul>  nella sezione di navigazione nel file .html.

<div id="navigation">
	<ul>
	<li><a id="activelink" href="#">Home</a></li>
	<li><a href="#">Pillole</a></li>
	<li><a href="#">Contenuti</a></li>
	<li><a href="#">Grafica</a></li>
	<li><a href="#">Linguaggi</a></li>
	<li><a href="#">Webdesign</a></li>
	<li><a href="#">Software</a></li>
	</ul>
	</div>

E nel file .css coppiamo i seguenti “stili di navigazione” per personalizzare il menu:

/*stili per la navigazione*/

div#navigation ul{margin: 0;padding: 0; list-style-type: none;}

div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/

div#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}

div#navigation a:hover{color: #fff;text-decoration: underline}

div#navigation a#activelink{color: #033;text-decoration: none}

Visto che il tag è a, le proprietà vanno messe dentro il tag navigation a. Tutti i link che sono dentro navigation son con queste proprietà.

"Margini" e "padding" sono le due proprietà usate per la spaziatura degli elementi in HTML. Il margine è lo spazio esterno dell'elemento e il padding invece è l'imbottitura, lo spazio all'interno dell'elemento.

I selettori:

-          a:hover   gestisce il comportamento del tag a quando ci siamo sopra il link con il mouse (cambiare colore, sottolineare, campiare l’imagine pulsante);

-          a:activelink   ci fa vedere che siamo già stati nella pagina del link.

Quando dobbiamo mettere imagini nel menu, si inserisce il tag dell’imagine nel documento .html

<img src="url" alt="some_text"> .