Mr. Webmaster Menu
  • Home
  • Cerca
  • Didattica
    • A
    • Android
    • Apache
    • Apple
    • ASP
    • ASP.Net
    • C
    • Cloud
    • CMS
    • CSS
    • D
    • Database
    • E
    • Editor
    • G
    • Grafica
    • H
    • Hosting
    • HTML
    • J
    • Java
    • Javascript
    • jQuery
    • L
    • Leggi e Fisco
    • Linux
    • M
    • Mobile
    • MySQL
    • N
    • NET Framework
    • P
    • Photoshop
    • PHP
    • Primi Passi
    • Programmazione
    • R
    • Reti
    • Ruby
    • S
    • Sicurezza
    • Social Media
    • SQL
    • W
    • Web Design
    • Web Marketing
    • Web Server
    • Windows
    • WordPress
    • X
    • XML
    • Di tendenza
    • Android Studio
    • Bootstrap
    • Cookie Law
    • Hosting Wordpress
    • Node.js
    • Registrazione Domini
  • Download
    • Software
    • Script
    • Plugin CMS
    • Flash Movies
    • Sound Loops
    • Templates
    • Web Grafica
    • Font Gratis
  • Risorse
    • SEO Tools
    • WebApps
  • News
  • Blog
  • Forum
  • Network
    • Toolset.it
    • SiteMarket.it
    • Codalo.it
  • Corsi on-line
Mr. Webmaster → CSS → Articoli → Menu CSS → Un floating menu che resta fisso a fondo pagina

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).

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:

Naviga tra i contenuti

←Stilizzare le barre di scorrimento
→Simulare le mappe di immagine con i CSS
Sponsor

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • App Android
  • App iOS
  • Feed RSS
Frequenta i nostri corsi
  • Corso CSSCorso CSS
    Stilizzare siti Web coi CSS e CSS3. A partire da 39 €
  • Corso HTMLCorso HTML
    Il linguaggio di markup delle pagine web. A partire da 29 €
  • Corso Webmaster AvanzatoCorso Webmaster Avanzato
    Diventa un Webmaster professionista. A partire da 49 €
Vedi anche...
  • Creare un menu con CSS Menu Generator
  • Box model sui link: un semplice menu con i CSS
  • Menu con gli angoli smussati con i CSS
  • Un menu con effetto 3D... utilizzando solo i CSS!
  • Menu orizzontale con effetto rollover
Guide
  • Guida CSS
  • Guida CSS3
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2018 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: info legali / privacy / cookie
Altro: extra / sondaggi / sitemap