Come creare navigazione stile Facebook

marco.tardelli

Come creare navigazione stile Facebook

Ciao a tutti
Visitando la pagina di facebook (dove possiamo creare le fan page)

facebook.com/pages/create.php

vorrei implementare nel mio sito una soluzione simile di navigazione

L'utente clicca sull' immagine, l'immagine esce di scena e appare un piccolo form per registrazione
Se un utente clicca su di un'altra immagine/scelta si chiude quella precedentemente aperta

Anche nel mio caso devo creare una soluzione molto simile alla pagina di facebook con 6 scelte.

Pertanto chiedo gentilmente a qualcuno se mi può dare un consiglio su come fare

francesco.di.caprio

Ciao Marco,

prendendo in considerazione l'esempio di Facebook che tu stesso hai citato, puoi utilizzare jQuery.
In particolare, la funzione che ti necessita è la slideUp. La documentazione ufficiale di questa funzione la trovi qui: api.jquery.com/slideUp/
Se sei pratico di HTML/CSS/jQuery, non devi far altro che piazzare il div contenente l'immagine o il testo che fa da "link cliccabile" e il div contenente il form entrambi in un altro div padre. Alla parte cliccabile andrai a specificare a specificare un id che utilizzerai nella parte jQuery per dire al browser che al click su di essa, dovrà eseguire la funzione slideUp, in questo modo:


$("#id_parte_cliccabile").click(function() {
    $("#form").slideUp("slow");
});

Il parametro "slow", che appunto significa "lento", indica la velocità con la quale il div #form deve tirarsi su. Tutti i possibili valori di quel parametro ce l'hai nella pagina che ti ho linkato prima.

EDIT: se vuoi cambiare la direzione facendo andare il div dall'alto verso il basso e non viceversa, puoi usare slideDown(). Documentazione: api.jquery.com/slideDown/

mtdev2

Come dice Francesco slideUp potrebbe essere una buona soluzione, simile, perchè su fb si tratta proprio di uno spostamento del contenitore. slideUp andrebbe ad agire sull'altezza invece.

Dovresti creare un div padre con queste proprietà sostanzialmente


.frame{
overflow:hidden;
position:relative;
width:200px;
height:200px;
}

Dentro metti un ulteriore div che abbia l'altezza 400px, doppia dei "quadrati" che vuoi far apparire uno alla volta, infine altri due div per i quadrati. Per farlo scorrere usi la proprietà CSS "top" su .film con .animate() di jQuery, da top:0px a top:-200px.


<div class="frame">
    <div class="film">
        <div class="square"></div>
        <div class="square"></div>
    </div>
</div>


.film {
position:absolute;
height:400px;
width:200px;
top:0px;
}

marco.tardelli

Grazie infinite mi è stato utilissimo il tuo suggerimento