Una tendenza molto diffusa negli ultimi tempi è quella di inserire nelle proprie pagine delle aree a scomparsa, che possono essere espanse/ridotte per visualizzare ulteriori informazioni. Questa pratica, oltre ad aggiungere (se ben realizzata) un elemento di originalità al proprio design, presenta dei vantaggi anche dal punto di vista comunicativo: permette infatti di nascondere informazioni superflue, favorendo la concentrazione del visitatore su quello che è il messaggio principale contenuto nella pagina.
L’immagine all’inizio del post rappresenta un esempio di utilizzo di questa tecnica. Toggle, web agency londinese, ha infatti utilizzato questa tecnica nel suo nuovo sito per nascondere i servizi destinati ai clienti.
Vediamo ora come realizzare un effetto simile sfruttando Mootools e una semplice funzione javascript.
Per farlo sfrutteremo questo tutorial pubblicato da Antonio Lupetti sul suo blog Woork (se l’inglese non è un problema, è senza dubbio uno dei siti da aggiungete ai preferiti, ci sono dei tutorial davvero eccellenti), al quale ci siamo permessi di apportare delle modifiche per fare in modo che al caricamento della pagina il pannello venga visualizzato chiuso anziché aperto e per risolvere alcuni bug di visualizzazione in Internet Explorer 7.
Lo script è scaricabile da qui:

• Download da CSSMagazine (versione modificata)
• Download da Woork (versione originale dello script)

Per prima cosa dobbiamo inserire, all’interno dei tag head della nostra pagina, questo script:

<script type=”text/javascript” src=”mootools.svn.js”></script>
<script type=”text/javascript”>
window.addEvent(’domready’, function(){
var mySlide = new Fx.Slide(’top-panel’);
mySlide.hide();
$(’toggle’).addEvent(’click’, function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>

La prima riga serve a richiamare il framework Mootools, indispensabile per il funzionamento dello script, mentre il codice successivo costituisce la funzione che si occupa di visualizzare/nascondere il pannello.
Questo invece il codice HTML da inserire:

<div id=”top-panel”>
<img src=”img/face.jpg” width=”40″ height=”40″ class=”face”/>
<strong>CSS Magazine</strong><br />
info@cssmagazine.it<br />
Visita il nostro sito: <a href=”http://www.cssmagazine.it”>www.cssmagazine.it</a>
</div>
<div id=”sub-panel”>
<a href=”#” id=”toggle”><span>Visualizza pannello</span></a>
</div>

In pratica vengono creati due DIV, nel “top-panel” andrà inserito il contenuto da nascondere, mentre nel “sub-panel” viene visualizzato il pulsante (o un semplice link, se preferite).
Di seguito il codice CSS dell’esempio:

<style type=”text/css”>
body{
border:0;
padding:0;
margin:0;
font-family:”Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#555555;
}
a:link, a:visited{color:#0066CC;}
#top-panel{
background:#e8f3c6;
padding:14px 20px;
text-align:right;
float: left;
}
#sub-panel{
border-top:3px solid #a6c34e;
text-align:center;
}
#sub-panel a{
width:150px;
float:right;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;
background:url(img/sub-right.png) right bottom no-repeat;
display:block;
}
strong{color:#000000;}
.face{border:solid 2px #a6c34e; margin-left:10px; float:right;}

A questo indirizzo potete vedere una pagina dimostrativa.
Possibili utilizzi di questa tecnica
Come si può facilmente immaginare sono tantissimi, solitamente i pannelli a scomparsa vengono utilizzati per ospitare delle form: login ad un area riservata, motore di ricerca, form di contatto o di segnalazione, meglio ancora se in Ajax.

Via