Avete presente l’effetto di quei div, che vengono esplosi nelle pagine web?
In pratica il div esploso fa andare a capo il contenuto della pagina, al fine di focalizzare l’attenzione su altre informazioni secondarie come dei tab, pubblicità o semplicemente approfondimenti aggiuntivi.
Andiamo a vedere come creare un div animato
Per questo tipo di sviluppo useremo un JavaScript: Animate Colspan Div
La cosa importante è avere una pagina con il seguente DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
- Andiamo a richiamare il JavaScript tra i tag <head>…</head>
<script type="text/javascript" src="animatedcollapse.js"></script>
Vi ricordo che qualora spostiate il file JS in sottocartelle di inserite il percorso esatto esempio JS/animatedcollapse.js
- A questo punto creiamo il collegamento al pulsante che farà esplodere il div
<a href="javascript:collapse2.slideit()">Visibile/Invisibile</a>
Realizzato il collegamento al JavaScript andremo a creare il nostro div nascosto
<div id="cat" style="background-color: #99E0FB;">
<div style="padding: 0 5px">
<p align="center" class="Stile1">QUESTO DIV PRENDE LE DIMENSIONI <br />
A SECONDA DEL CONTENUTO DEL DIV </p>
</div></div>
<script type="text/javascript">
var collapse2=new animatedcollapse("cat", 500, true)
</script>
Il nostro contenuto sarà dentro un div di id=”cat” che verrà preso in considerazione dal Js successivo per impostare il tempo dell’animazione di esplosione.
Ovviamente non sta a me ricordarvi, che il div può contenere qualsiasi oggetto testo, immagine, flash e che può essere personalizzato tramite CSS esterni nel colore, dimensioni e posizioni.
complimenti …. bello e funziona anke molto bene …. di facile utilizzo …. senti ma se volessi che il div cmparisse … come si può dire … in orizzontale …. cioè al posto che dal”alto verso il basso da destra verso sinistra …..
Si dovrebbe modificare il file .js e dove si impostano parametri per l’altezza height sostituire con la larghezza width
Dovrei averci azzeccato
è no anke io ci avevo pensato … sono andato sul file .js e ho fatto un cerca e sostituisci …. ho sostituito tutte le parole height con width … ma quqando provo a cliccare su visibile/invisibile mi viene fuori una finestra di avviso con il seguente mess : please wait until document has fully loaded then click again …
an e volevo anke chiederti una cosa … solo che nn so dove postarla … io volevo crare tipo un menu del tipo | home | chi sono | ecc | …. come faccio a fare in modo che quando vado sopra con il mouse su una di queste parole la parola scenda e sparisca e intanto ne compaia un’altra dall’alto … ??? del tipo vai sopra home e vedi home che scorre verso giu ma man mano che scende sparisce un pezzo e da sopra ricompare home …. xo nn in flash …. javascript … oppure boh ….
Giulio forse ho capito cosa intendi, diciamo che a farlo a mano ci vorrebbe tempo, invece con qualche programma potresti riuscirci.
Ti consiglio Sothink DHTMLMenu
Crei facilmente dei menu accessibili a tutti i browser
saluti