Lezione 35: Costruiamo un template (Parte 5^): Il Menu

Impariamo a costruire un sito Web

Lezione 35: Costruiamo un template (Parte 5^)

Continuiamo a costruire il nostro menu. Abbiamo inserito nel css la formattazione della barra del menu co l’id #nav. Adesso dobbiamo assegnare le proprietà alle voci di menu.

Innanzitutto vediamo quali dichiarazioni occorrono per le voci di menu del 1° livello (quello sulla barra del menu). Se ricordate nella lezione precedente avevamo scritto nella pagina html le voci di menu utilizzando il tag delle liste <ul>.

[ad code=5]

La prima parte della dichiarazione era:

<ul id="nav">
   <li class="current"><a href="#">Home</a></li>
   <li><a href="#">Stintino e dintorni</a>
      <ul>
         <li><a href="#">Capo falcone</a></li>
         <li><a href="#">La Pelosa</a></li>
         <li><a href="#">Stintino paese</a></li>
         <li><a href="#">L'Asinara</a></li>
      </ul>
   </li>
.....
.....

Quindi gli elementi del menu sono tutti definiti in un tag <li>. Quelli di primo livello saranno individuati con la dichiarazione #nav li che identifica gli elementi <li> discendenti dall’elemento #nav. Queste dichiarazioni verranno poi estese a tutti gli elementi <li> discendenti da #nav e quindi anche alle voci di menu di livello inferiore a meno che non vengano sovrascritte da dichiarazioni specifiche in priorità. La dichiarazione da inserire nel CSS è:

#nav li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: left;
  position: relative;
  list-style: none;
}

Il margin: 0 5px; indica che il margine superiore è 0 e quelli sinistro e destro sono entrambi 5px.
Il padding inferiore di 8 px è necessario per far si che l’altezza della riga della voce di menu aumenti verso il basso, fino a 38px andando a coincidere con l’estremità bassa della barra del menu. Se l’elemento di menu avesse un’altezza di soli 30px, scendendo col mouse si andrebbe a finire sulla barra del menu e le voci di secondo livello (che faremo partire dalla fine della barra) verrebbero chiuse. Provare per vedere l’effetto.
La dichiarazione float: left; è fondamentale perché è quella che consente alle voci di essere allineate orizzontalmente, altrimenti finirebbero una sotto all’altra.
Il posizionamento relative dice che il riferimento non è la finestra del browser, ma il posizionamento che l’elemento assumerebbe di default. Servirà per gli elementi di livello inferiore perché vengano posizionaticorrettamente in riferimento appunto all’elemento da cui dipendono.
list-style: none; dice che non vogliamo alcun bullet per la lista.

Come abbiamo detto sopra queste dichiarazioni verrebbero poi estese a tutti gli elementi <li> discendenti da #nav e quindi anche alle voci di menu di livello inferiore a meno che non vengano sovrascritte da dichiarazioni specifiche in priorità. Quindi la prima cosa da fare è sovrascrivere quelle che non devono essere estese alle voci di livello inferiore, che sono le prime tre (margin, padding e float). Quindi dichiariamo:

#nav ul li {
  float: none;
  margin: 0;
  padding: 0;
}

Questa dichiarazione si riferirà a tutti gli elementi <li> discendenti da un <ul> a sua volta discendente da #div. Appunto, gli elementi di menu di livello inferiore. Annulliamo il float così che questi vengano riportati in verticale e azzeriamo margin e padding.

A questo punto dobbiamo aggiungere la formattazione dei link del menu. Nell CSS aggiungiamo quanto segue:

#nav a {
  font-weight: bold;
  color: #e7e5e5;
  text-decoration: none;
  display: block;
  padding:  8px 20px;
  margin: 0;
  text-shadow: 0 1px 1px #666666;
}

#nav a fa riferimento a tutti i tag <a> discententi dell’ID #nav.
Le prime due proprietà dicono che il testo sarà in grassetto e col colore indicato.
text-decoration: none; specifica che non vogliamo che i link siano sottolineati.
display: block; insieme al padding fa si che la voce di menu si presenti come un blocco di altezza 30px (14px di font + 8px di padding-top + 8px di padding-bottom).
il margine a zero è riferito all’elemento contenitore che, come visto, ha position: relative;.
Applichiamo inoltre un ombra al testo con box-shadow: 0 1px 1px #666666;. Essendo uno dei colori base lo potrete anche vedere scritto semplicemente come #666 con tre cifre.

Come è ben visibile dall’immagine riportata all’inizio della lezione scorsa, abbiamo ipotizzato che la voce di menu che si riferisce alla pagina corrente e la voce su cui abbiamo portato il mouse siano evidenziate rispetto alle altre con un background celeste.

Per far questo dobbiamo evidenziare queste due voci differenziandole dalle altre per assegnar loro le giuste proprietà. Abbiamo quindi deciso di individuare la pagina attiva con una classe che chiameremo .current, mentre per riferirci alla voce su cui posizioniamo il puntatore del mouse utilizziamo la pseudo-classe :hover (vedi la lezione 15).

Nel CSS dobbiamo quindi aggiungere queste dichiarazioni:

#nav .current a, #nav li:hover > a {
  background: #9DC9D7;
  background-image:url(../images/current.png);
  background-repeat:repeat-x;
  color: #444;
  text-shadow: 0 1px 0 #EBEBEB;
  border-top: solid 1px #f3f8f8;
  box-shadow: 0 1px 1px #666;
  border-radius: 3px;
}

 

#nav .current a (il link discendente da un elemento di classe .current a sua volta discendente da #nav) sta ad individuare l’elemento di menu corrispondente alla pagina attiva (Home nella pagina che stiamo sviluppando). Nella pagina infatti abbiamo assegnato la classe .current a questa voce di menu.
#nav li:hover > a invece indica un link figlio (cioè immediatamente successivo) di un elemento di lista <li> sul quale abbiamo posizionato il mouse (:hover) e discendente di #nav.

Vediamo le proprietà:

Il background viene riprodotto utilizzando un immagine di 1px di larghezza e 31px di altezza (l’altezza del link che vogliamo colorata più chiara) ripetuta orizzontalmente per la lunghezza della voce di menu. Il colore viene comunque indicato nel caso in cui l’imagine non venga caricata, ma normalmente è inutile.

Il colore del testo viene variato perché sia ben visibile sullo sfondo chiaro. Inoltre gli diamo un ombra verticale di 1 px molto chiara con la dichiarazione text-shadow: 0 1px 0 #EBEBEB;.
La proprietà relativa al bordo superiore è evidentemente non necessaria, ma fa parte di quelle che abbiamo inserite per ottenere un effetto finale sufficientemente gradevole.
A questi elementi applichiamo inoltre un ombra con box-shadow: 0 1px 1px #666;. Per come usare quessta direttiva rimandiamo alla lezione 21.
Infine arrotondiamo i bordi con border-radius: 3px; Ricordiamo che non tutte le versioni dei browser interpreteranno questa direttiva (in particolare Internet Explorer la supporta solo a partire dalla versione 9) nel qual caso non avrà alcun effetto.

Tutte le proprietà dei link definite prima che non siano state sovrascritte in questa dichiarazione verranno applicate anche al link attivo e :hover. (ad es. font-weight: bold;, text-decoration: none; ecc.).

Vediamo ancora cosa scrivere relativamente alla finestrella dropdown che si deve aprire per ospitare le voci di 2° livello quando passiamo il mouse su una voce di 1° livello:

#nav li:hover > ul {
  display: block;
  z-index:2;
}

La direttiva #nav li:hover > ul identifica una lista discendente immediatamente da un elemento di un’altra lista su cui è il puntatore del mouse. Il tutto ovviamente discendente di #nav.
display: block; come sempre dice che l’elemento deve essere trattato come un blocco.
z-index:2; va inserito per far si che questo blocco venga evidenziato sopra agli altri elementi della pagina che eventualmente occupassero lo stesso spazio. Potete rivedere l’uso di z-index alla lezione 26. Naturalmente anziché 2 si poteva scrivere un qualsiasi valore alto. z-index:1000 avrebbe avuto lo stesso effetto. Dovete solo fare attenzione nel caso vi siano poi altri elementi che devono apparire più in superficie a mettere i valori di conseguenza.

Con questo abbiamo introdotto la parte relativa agli elementi di menu di livello inferiore che vedremo nella prossima lezione a conclusione della complessa parte relativa al menu.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.