Come realizzare un footer interattivo per il tuo sito web

Il footer è quella sezione del sito web che si trova a piè pagina e come in un articolo, rappresenta la sua conclusione. È un elemento indispensabile di un sito web e nonostante questo viene spesso trascurato. Qualche settimana fa ho scritto un post su YIW che parla della sua importanza e dei contenuti che possiamo inserire nel footer.

Un modo sicuramente creativo ed originale per attirare l’attenzione sul footer è quella di realizzarne uno interattivo. Grazie alle nuove specifiche web e sfruttando sempre le transizioni css3 possiamo realizzare questo tipo di menù interattivo con un effetto di apertura cassetto al passaggio del mouse hover che mostra le informazioni più importanti.

TUTORIAL

#1 –  Struttura della pagina

La struttura della pagina è formata da un tag “section” per ogni cassetto che al suo interno contiene la classe “contenuto” e la classe “cassetto”. Nel primo cassetto inseriamo i copyrights, nel secondo i link di chi siamo, contattaci e link utili; nel terzo i link della mappa sito, privacy policy e condizioni di contratto; infine nell’ultimo inseriamo i link ai social networks. Ne realizziamo in totale 4.

#1 – Lo stile del footer

  • Prima di tutto dobbiamo definire lo stile della sezione (footer section) definendo il suo background scuro, la sua posizione relativa ed in particolare le proprietà delle transizioni della durata di 5 secondi che sarà importante poi per lo stato hover.
footer section{
position:relative;
width:235px;
float:left;
left:140px;
height:100px;
background: #333;
margin-right:50px;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
transition: all 0.5s;

}
  • Dopo definiamo lo stato hover della sezione che serve a definire lo stile della parte scura di background del cassetto: il bordo arrotondato e l’ombra del contenitore.
footer section:hover{
border-radius:5px;
width:238px;
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);

}[/php]
    • Definiamo la classe “cassetto” che determina il design del lato principale del cassetto che si apre allo stato hover e mostra i fogli con i contenuti.

 

 

footer section .cassetto{
position:absolute;
top:0;
left:0px;
width:240px;
height:100px;
background: #099 url(pomello.png) no-repeat center center;
-moz-box-shadow:0px 3px 5px rgba(0,0,0,0.3);
-webkit-box-shadow:0px 3px 5px rgba(0,0,0,0.3);
box-shadow:0px 3px 5px rgba(0,0,0,0.3);
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
transition:all 0.5s;
	}
  • Con le pseudo classi ::after e ::before miglioriamo il design del cassetto dando un senso di maggior profondità al cassetto e definiamo il bordo più scuro superiore ed inferiore del cassetto.
.cassetto::before{
content:"";	
width:240px;
background:#066;
height:20px;
position:absolute;
z-index:1;
-webkit-box-shadow: 0px 5px 5px rgba(0, 102, 102, 0.75);
-moz-box-shadow:    0px 5px 5px rgba(0, 102, 102, 0.75);
box-shadow:         0px 5px 5px rgba(0, 102, 102, 0.75);	
}
.cassetto::after{
content:"";	
width:240px;
background:#066;
height:30px;
position:absolute;
top:70px;
z-index:1;
}
  • La classe contenuto serve a definire il contenuto del foglio bianco che fuoriesce al passaggio del mouse sul cassetto.
footer section .contenuto {
position:absolute;
top:0;
left:5px;
background:#fff;
padding:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius: 5px;
width:200px;
height:85px;
margin:5px;
font-size:0.8em;
text-align:center;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
transition:all 0.5s;		
}
  • lo stato hover della sezione con classe cassetto ( footer section:hover .cassetto) serve a definire l’effetto del cassetto che si apre. Come viene fatto? modificando la posizione superiore e sinistra del cassetto che grazie alla transizione impostata sulla classe cassetto determina un movimento dolce.
footer section:hover .cassetto {
top:20px;
left:0px;
width:240px;
height:	100px;
margin-right:0px;
-moz-box-shadow:0px 5px 8px rgba(0,0,0,0.7);
-webkit-box-shadow:0px 5px 8px rgba(0,0,0,0.7);
box-shadow:0px 5px 8px rgba(0,0,0,0.7);
	}
  • lo stato hover della sezione con classe contenuto ( footer section:hover .contenuto) permette al foglietto bianco di fuoriuscire dal cassetto e grazie ad un top negativo e alle transizioni il foglio si muove in posizione opposta dell’apertura del cassetto.
footer section:hover .contenuto {
top:-60px;
left:0px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
-moz-box-shadow:0px 0px 5px rgba(0,0,0,0.5);
-webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.5);
box-shadow:0px 0px 5px rgba(0,0,0,0.5);
}

Dopo di che possiamo definire il nostro stile per i link ed altri piccoli particolari che rendono il nostro footer interattivo veramente originale. Che ne pensi? Dillo nei commenti.

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “FOOTER INTERATTIVO”—

Nome *

Email *

Per piacere seguici e metti mi piace:
alederobertis75
info@alessandraderobertis.it
Nessun Commento

Pubblica un commento