Lezione 36: Costruiamo un template (Parte 6^): Il Menu

Impariamo a costruire un sito Web

Lezione 36: Costruiamo un template (Parte 6^)

Terminiamo con questa lezione la costruzione del nostro menu. Continuiamo con le definizioni necessarie per stilizzare il secondo livello di menu.

Cominciamo con inserire nel CSS le caratteristiche della lista di secondo livello:

#nav ul {
  background: #edf2f6;
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 35px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 3px;
  box-shadow: 0 1px 3px #B4B4B4;
}

 

[ad code=5]

Con #nav ul indichiamo appunto una lista (ul) discendente dalla lista principale che abbiamo identificato con l’ID #nav.

Background, margin e padding ci pare superfluo descriverli ancora. La larghezza la fissiamo in modo da ospitare le voci di menu. Più interessante è vedere la dichiarazione display: none; che inseriamo per evitare che il sottomenu sia sempre visibile. A noi interessa che sia visibile solo quando portiamo il mouse sopra al link della voce di menu di primo livello corrispondente. Quindi lo renderemo visibile appunto in questa circostanza. Questo avviene con la dichiarazione display: block; che abbiamo assegnato a #nav li:hover > ul (lezione scorsa) cioè ad una lista (ul) immediatamente discendente da un elemento della lista principale col mouse sopra (#nav li:hover). Solo in questo caso il blocco secondario sarà visibile.

position: absolute; insieme a top e left li indichiamo per il posizionamento del box che ospita il sottomenu verticale. il top sarebbe posizionato per default in corrispondenza del margine superiore della voce di menu corrispondente ed è quindi da li che dobbiamo scendere sino al punto che ci aggrada di più (noi lo abbiamo così fissato 35px più sotto).

border, border-radius e box-shadow si riferiscono alla lista (non al singolo elemento di lista) e quindi al box che contiene il sottomenu. Anche questi sono già stati commentati precedentemente per altri selettori e quindi evitiamo di ripeterci.

Il passo successivo è quello di definire nei dettagli l’aspetto dei link dei sottolivelli. Definiremo le proprietà di stile sia ai link in situazione normale, sia ai link quando il puntatore del mouse è portato sopra il link.

Definiamo prima:

#nav ul li:hover a, #nav li:hover li a {
  background: none;
  border: none;
  color: #666;
  box-shadow: none;
  font-weight: normal;
  text-shadow: 0 1px 0 #F5F5F5;  
  border-bottom:1px solid #9ECFDA;
}

Con #nav ul li:hover a intendiamo i link (a) discendenti da un elemento di lista con il puntatore del mouse sopra (li:hover) discendente da una lista discendente di quella principale (#nav ul).

Con #nav li:hover li a intendiamo i link (a) discendenti da un elemento di lista (li) a sua volta discendente da un elemento della lista principale, con il puntatore del mouse sopra (#nav li:hover).

In questo modo identifichiamo tutti i link del sottomenu, sia quelli normali, sia quello eventualmente con il puntatore del mouse sopra. Quindi le proprietà che indicheremo saranno assegnate a tutte le voci del sottomenu. E’ evidente che se vogliamo poi differenziare dagli altri il link selezionato (quello col puntatore del mouse sopra) per esempio per i colori dovremo assegnare successivamente altre proprietà che sovrascrivano queste.

Le proprietà generali da assegnare a tutti i link di livello inferiore che abbiamo identificato sono:

border: none;box-shadow: none; necessarie perché ciascun elemento non erediti le proprietà di bordo e ombra che abbiamo dato al box del sottomenu.
Il colore lo assegnamo salvo poi modificarlo per l’elemento selezionato, come detto.
Il background: none; è necessario solo per le voci che hanno un terzo livello di menu per evitare che il background di quella voce,dopo esser passati sul terzo livello, diventi celestino come il background del 1° livello.
font-weight: normal; lo mettiamo perché vogliamo che le voci dei sottomenu non siano in grassetto, al contrario di quelle di primo livello.
Dell’ombra del testo abbiamo già detto, ma naturalmente ricordiamo che sono scelte personali che possono essere evitate.
Infine assegnamo 1px di bordo inferiore azzurro chiaro per separare le voci di menu.

Come detto prima a questo punto dobbiamo differenziare alcune proprietà per il link selezionato del 2° livello. Quindi scriviamo:

#nav ul a:hover {
  background: #0399d4 !important; 
  color: #fff !important;
  border-radius: 3px;
  text-shadow: 0 1px 1px #F7F7F7;
}

#nav ul a:hover identifica appunto i link con il puntatore del mouse sopra (a:hover) discendenti da una lista a sua volta discentente da quella principale (#nav ul).

Assegnamo quindi lo sfondo azzurro avendo cura di aggiungere !important perché altrimenti, vedremmo mantenuto il colore assegnato agli altri elementi perché per il browser il selettore #nav ul a:hover è meno specifico di #nav li:hover li a. Non è chiaro il motivo, ma è facile comunque superare il problema in queste situazioni aggiungendo !important. (vedi lez. 17 per come vengono definite le priorità tra i selettori).
Per lo stesso motivo assegnamo il colore bianco al testo sempre con !important.
Infine diamo un bordo all’elemento selezionato con border-radius ed un ombra al testo.

Ci resta poco per concludere il menu. Innanzitutto dobbiamo ancora assegnare qualche proprietà agli elementi di menu di terzo livello. Lo facciamo così:

#nav ul ul {
  left: 181px;
  top: -3px;
  z-index:2;
}

#nav ul ul si riferisce alle liste discendenti da una lista a sua volte discendente da quella principale, ossià il menu di terzo livello.
Questi elementi erediteranno tutte le proprietà che abbiamo assegnato agli elementi di secondo livello per cui dobbiamo assegnare alcune proprietà specifiche per sovrascrivere quelle ereditate.
left: 181px; viene assegnata per distanziare verso destra la finestra del menu di terzo livello rispetto a quella di secondo livello che aveva left: 0;
Ugualmente il top. Potete modificare questi valori per posizionare questo blocco a vostro piacimento.
z-index:2; viene messo perché questa finestra quando è visibile rimanga sempre in primo piano e non finisca sotto al corpo della pagina che vedremo nelle prossime lezioni.

Gli ultimi due blocchi di definizioni saranno:

#nav ul li:first-child > a {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

#nav ul li:last-child > a {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

La dichiarazione #nav ul li:first-child > a si riferisce ai link (a) immediatamente discendenti dal primo figlio di un elemento di una lista discentente dal menu principale. Se ci riferiamo alla seconda voce di emnu ‘Stintino e dintorni’, per esempio, questa dichiarazione si applicherà su ‘Capo Falcone’ che è il primo figlio.
Esattamente analoga sarà la spiegazione della seconda dichiarazione che si riferirà all’ultimo figlio del menu di livello inferiore.

A questi elementi arrotondiamo i bordi, superiori per il primo figlio ed inferiori per l’ultimo figlio, così che la finestra del menu di livello inferiore appaia con i bordi arrotondati.

Con queste dichiarazioni si chiude la trattazione del menu che è oggettivamente la parte più complessa. A conclusione del template riceverete comunque tutto il materiale dell’esempio trattato.

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.