Lezione 34: Costruiamo un template (Parte 4^): Il Menu

Impariamo a costruire un sito Web

Lezione 34: Costruiamo un template (Parte 4^)

Siamo quindi arrivati al punto più complesso del menu.

Quello che dovremo scrivere nella pagina html in realtà è piuttosto semplice. La parte complessa come sempre sarà quella di assegnare le proprietà adeguate perché il menu assuma l’aspetto che ci siamo prefissati.

[ad code=5]

L’immagine sotto ci ricorda come avevamo immaginato il nostro menu.

MenuFig.1

Abbiamo quindi una barra orizzontale entro le quali andremo a piazzare le voci di menu. La barra sarà evidentemente un blocco <div>.

Nella pagina html scriveremo quindi:

<div>
   <!-- Voci di Menu  -->
</div>

Per le voci del menu

utilizzeremo i tag delle liste. Per rinfrescarvi la memoria sui tag delle liste potete andare alla lezione 8.

Noi utilizzeremo una lista non ordinata (<ul> … </ul>) e quindi scriveremo all’interno della div quello che riportiamo qui sotto:

<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>
  <li><a href="#">Arte e Architettura</a>
    <ul>
      <li><a href="#">Arte architettonica</a>
	<ul>
	  <li><a href="#">Torri costiere</a></li>
          <li><a href="#">Chiese</a></li>
          <li><a href="#">Nuraghi</a></li>
	</ul>
      </li>
      <li><a href="#">Musei</a>
    	<ul>
          <li><a href="#">Museo della Tonnara</a></li>
          <li><a href="#">Sella & Mosca</a></li>
	  <li><a href="#">Musei di Sassari</a></li>
	</ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Flora e Fauna</a>
    <ul>
      <li><a href="#">Fauna</a>
        <ul>
          <li><a href="#">Fauna di Terra</a></li>
          <li><a href="#">Fauna marina</a></li>
          <li><a href="#">Uccelli</a></li>
        </ul>
      </li>
      <li><a href="#">Flora</a></li>
    </ul>
  </li>
  <li><a href="#">Contatti</a></li>
</ul>

Al tag <ul> abbiamo assegnato l’id “nav” per poterlo stilizzare facendo appunto riferimento a questo id.
Dovrebbe essere tutto auto-esplicativo. <ul> è una lista e <li> sono gli elementi. Se un elemento è a sua volta suddiviso in altre voci, all’interno dei tag che lo identificano <li> .. </li> inseriremo una nuova lista.

Adesso dovremo lavorare sul css per dare al menu l’aspetto desiderato. Infatti questa parte di html senza la giusta formattazione apparirebbe come nella figura sotto riportata. La div sarebbe un contenitore invisibile e la lista degli elementi sarebbe una brutale lista verticale. Potete verificare questo aggiungendo la parte html relativa al menu alla pagina che vi abbiamo fornito la lezione scorsa.

menu_errFig.2

Il primo passo sarà quello di inserire nel css la formattazione della barra del menu perché possa assumere l’aspetto di Fig.1.

Vediamo quindi quali dichiarazioni abbiamo associato all’id #nav:

#nav {
	margin: 0;
	padding: 7px 0 0 10px; 
	vertical-align:middle;
	display: block;
	line-height: 100%;
	height:40px;
	border-radius: 0.3em;
        box-shadow: 0 1px 3px #666666;
	background-image:url(../images/menu_bar.jpg);
	background-repeat:no-repeat;
	border: solid 1px #2D5E77;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}

Il significato di margin e padding ormai è ampiamente acquisito. Abbiamo assegnato un padding sinistro di 10px, mentre il padding-top va calibrato in modo che le voci di menu appaiano ben centrate verticalmente nella barra. Per lo stesso motivo abbiamo inserito la direttiva
line-height: 100%;‘ che regola l’altezza della riga fissando l’interline al 100% del font. Si poteva evitare di inserire questa direttiva e lavorare solamente col ‘padding‘ assieme alle direttive relative al tag <a> del menu (che vedremo dopo). Appena avremo terminato la descrizione di tutte le direttive del menu potrete divertirvi usando la funzione di ‘Ispeziona elemento’ di Chrome così come abbiamo visto la lezione scorsa. Modificando le direttive vedrete in diretta l’effetto sulla vostra pagina e combinando più modifiche potrete realizzare che si può ottenere lo stesso effetto in modo differente. Ricordiamo che le modifiche alle direttive di stile apportate con la funzione
‘Ispeziona elemento’ di Chrome
non hanno alcun effetto sul vostro file html, perché agiscono solo in memoria.

Anche ‘vertical-align:middle;‘ non richiede spiegazioni, così come ‘height:40px;‘. La direttiva ‘display: block;‘ dice che questo elemento #nav va trattato come un blocco. E’ in realtà superflua perché essendo interno ad un blocco <div> assume il valore ‘block’ di default.

La direttiva ‘ border-radius: 0.3em;‘ l’abbiamo usata per arrotondare i bordi, ma come abbiamo scritto alla lezione 21 non è supportata da tutti i browser; quelli più vecchi, in particolare IE prima della versione 9 non la supportano e quindi non la considereranno, mostrando gli angoli squadrati ad angolo retto. 1 em è la grandezza del font usato, per cui se il font è (vedi l’ultima direttiva) 14px un angolo di 0.3 em significa un angolo arrotondato di 4.2px.

La direttiva ‘box-shadow: 0 1px 3px #666666;‘ imposta un ombra sotto al bordo inferiore del nostro box. Per i singoli valori andate alla lezione 21. I browsers che non supportano questa direttiva non mostreranno l’ombra.

L’impostazione del background l’abbiamo ottenuta preparando un’immagine di 960×49 con un gradiente verticale sulla tonalità di blu. E’ un’immagine leggerissima (solo 2.8 KB) ed è il modo più semplice se non si vuole usare un colore di sfondo a tinta unita ed è inoltre interpretato senza problemi e nello stesso modo da tutti i browsers.

Anche la direttiva sul bordo non merita molte parole: bordo di 1 pixel del colore indicato. Per la scelta dei colori ed indicare il codice colore corretto potete usare un color picker tipo il programma Pixie.

Infine font-family e font-size li abbiamo messi in funzione del nostro gusto, ma si potevano evitare. Togliendo il font-size il carattere diventa più grande perché viene adottato il default di 16px.

La prossima lezione termineremo il menu e vi forniremo il codice sin qui sviluppato così che ciascuno possa fare le sue prove.

Lascia un commento

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