Un floating menu che resta fisso a fondo pagina

CommentaScrivi un commento
ForumDiscuti sul forum
PrecedenteStilizzare le barre di scorrimento
SuccessivoSimulare le mappe di immagine con i CSS

Pubblicato il
27/01/2009
Autore
Massimiliano Bossi

Alcuni giorni fa un cliente mi ha chiesto di realizzare un menu orizzontale posizionato a fondo pagina che avesse la particolarità di restare fisso in quella posizione a prescindere da:

la lunghezza dei contenuti presenti nella pagina web;
la risoluzione dello schermo dell'utente;
lo scrolling della pagina;

In sostanza: il nostro menu deve restare immobile sul fondo della pagina e deve essere sempre visualizzato nonostante l'eventuale scrolling di pagina... deve quindi essere un floating menu (un menu fluttuante).

Grazie ai CSS realizzare un simile menu è, in realtà, piuttosto semplice!
La proprietà principale che ci consentirà di ottenere questo risultato è position, la quale dovrà essere valorizzata come fixed.
Ma andiamo per gradi. Per prima cosa creiamo un DIV all'interno della nostra pagina web che dovrà fungere da contenitore per il nostro menu:

<div id="FOOTER">
<ul>
  <li><a href="/">Home-Page</a></li>
  <li><a href="/chi-siamo.html">Chi Siamo</a></li>
  <li><a href="/dove-siamo.html">Dove Siamo</a></li>
  <li><a href="/prodotti.html">Prodotti</a></li>
  <li><a href="/listino.html">Listino</a></li>
  <li><a href="/contattaci.html">Contattaci</a></li>
</ul>
</div>

Come potete vedere abbiamo semplicemente creato un DIV assegnandoli un ID ("FOOTER") ed al suo interno abbiamo aggiunto il nostro menu (che nel caso specifico abbiamo gestito mediante un comune elenco puntato).
Vediamo di seguito il codice completo che utilizzeremo per creare l'effetto richiesto:

body
{
  margin: 10px 0px 0px 0px;
}
#FOOTER
{
  position: fixed;
  bottom: 0px;
  width: 100%;
  text-align: center;
  background-color: #CCCCCC;
  border-top: 1px solid #000000;
}

Per prima cosa abbiamo impostato i margini del body eliminando quello di destra, sinistra e quello inferiore (nel nostro esempio il margine superiore è ininfluente).
Subito dopo abbiamo stilizzato il nostro div con ID "FOOTER" impostandone la "position: fixed",il posizionamento inferiore (bottom: 0px) e la larghezza (100% della pagina).

Continua dopo la pubblicità...

Il codice visto sopra funziona correttamente con tutti i browser di ultima generazione (IE7, Firefox, Safari, Chrome, ecc.) ma purtroppo non funziona con l'ancora molto utilizzata versione 6 di IExplorer! Per correggere questo problema è pertanto consigliabile aggiungere anche questo codice:

html #FOOTER
{
  position: absolute;
  top: expression((0-(FOOTER.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Con le vecchie versioni di IExplorer "position: fixed" non funziona e dobbiamo pertanto fare ricorso a "position: absolute" settando dinamicamente il valore di top mediante una expression (cd. Dynamic Properties).

Da sottolineare, ancora, che "position: fixed" funzionerà correttamente con IExploer 7 solo se è stato settato correttamente il doctype della pagina!.

Per finire non ci resta che aggiungere un altro pizzico di CSS per rendere più carino il nostro menu realizzato con l'elenco puntato:

#FOOTER ul
{
  list-style: none;
  padding: 0px;
  margin: 10px 0px 10px 0px;
}
#FOOTER li
{
  display: inline;
  width: 100px;
  margin: 0px 10px 0px 0px;
  padding: 4px;
  border: 1px solid #000000;
  background-color: #EEEEEE;
}
#FOOTER a
{
  color: #333333;
  text-decoration: none;
}

Per apprezzare a pieno il risultato ottenuto dovete inserire il codice all'interno di una pagina già piena di contenuti.

Di seguito uno screenshot con il nostro risultato:

Un floating menu che resta fisso a fondo pagina

Naviga tra i contenuti

Commenti