Il menù creato con i Css ha un doppio vantaggio: quello grafico, cioè la possibilità di mettere immagini di sfondo per ogni stato del pulsante (link, visited, hover e active) e quello per l’accessibilità, cioè avere comunque un link testuale per i motori di ricerca.

In poche parole si ottiene mettendo i link all’interno di un div per il menù (dovremmo averlo già fatto creando la struttura) e soprattutto, all’interno di un elenco puntato html (unordered list, cioè tag <ul>).

1) Inserire il menù dentro all’elenco puntato.

Si selezionano i link e dice a DW (cercando il pulsante nella barra delle proprietà): “elenco non ordinato” (in inglese “unordered list”). Otterremo un codice simile al seguente:

<ul>

  <li><a href=”../home.html”>Home </a></li>

  <li><a href=”../chi_siamo.html” target=”_self”>Chi siamo</a></li>

</ul>

Tutti i link vengono racchiusi dentro al tag <ul> e ognuno di essi dentro un tag <li>;

2) Formattazione del tag <ul>

Chiaramente occorrerà (prima di procedere alla  formattazione del tag) impostare in maniera graficamente adeguata la regola per il tag che contiene il menù (si posson impostare la larghezza del div e il font per il testo del menù).

Per il tag <ul> creiamo la regola e andiamo nella voce “elenco” dicendo tipo=nessuno; in questo modo togliamo il punto dall’elenco puntato. Dopodiché mettiamo come proprietà di margini e spazi dall’elemento al bordo uguali a zero (per dire al tag <ul> che non deve occupare spazio alcuno): saranno i tag <a> (con le pseudo-classi e con il nome del div #menu) ad assumere la forma e lo spazio definitivo del pulsante.

3) Formattazione del tag <li> (solo menù orizzontale)

Nel caso di un menù verticale, formattare il tag <li> non serve a nulla. Se il menù deve essere invece orizzontale, dobbiamo assegnare alla regola per il tag <li> le proprietà visualizza:inline e i margini a zero.

4) Formattazione del tag <a>

Il tag <a> va formattato per le sue 4 pseudoclassi e per il contenitore che lo contiene, cioè:

#menu a:link

#menu a:visited

#menu a:hover

#menu a:active

volendo possiamo raggruppare le regole link e visited, in questo modo:

#menu a:link, #menu a:visited

#menu a:hover

#menu a:active

Ad ognuna di queste regole daremo le seguenti proprietà:

• finestra css “tipo“:

colore del font e sottolineatura “nessuna”

• finestra css “sfondo“:

possiamo inserire l’immagine per lo sfondo (diversa per ogni regola) o il colore

• finestra css “blocco di testo” (IMPORTANTE!!)

in questa finestra dobbiamo dare la proprietà “blocco” al visualizza, per far assumere al link l’aspetto di un pulsante e per rendere cliccabile tutta l’area e non solo il link testuale.

• finestra css “elementi di pagina”

diamo la larghezza del pulsante e l’altezza con gli spazi dall’elemento al bordo. Se il menù è orizzontale andrà aggiunta la proprietà float:left per affiancare il blocchi <li>.