Come creare navigazione stile Facebook

Marco Tardelli

Nuovo Utente
1 Giu 2005
5
0
0
Ciao a tutti
Visitando la pagina di facebook (dove possiamo creare le fan page)

http://www.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

Marco
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
se usi jquery il codice javascript diventa piuttosto semplice, con quello css dovrai lavorarci un po di piu
butto giu un esempio
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Prova</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <style type="text/css">

            .contenitore {
                width: 228px;
                height: 228px;
                border: 3px solid #E9E9E9;
                overflow: hidden;
                font-size: .8em;
                float:left;
                margin-left:5px;
            }
            .contenitore div {
                width: 204px;
                height: 204px;
                margin: auto;
                padding:10px;
                border: 2px solid #fff;
            }
            .contenitore div.form {
                display: none;
            }
            .contenitore div.form input{
                height: 12px;
            }
            .contenitore div.intro {
                background-color: #F2F2F2;
                text-align: center;
            }
            .contenitore div.intro p {
                margin:0;
                padding:0;
            }
        </style>
        <script>
            $(document).ready(function(){                
                $(".contenitore").click(function(){
                    $(".form").hide();
                    $(this).children(".form").show();
                    $(".intro").slideDown(200);
                    $(this).children(".intro").slideUp(200);
                })
            })
        </script>
    </head>
    <body>
        <div class="contenitore">
            <div class="intro">
                <p>Clicca</p>
            </div>
            <div class="form">
                <form>
                    <p>
                        Campo 1 :<input type="text" name="campo1"/>
                    </p>
                    <p>
                        Campo 2 :<input type="text" name="campo2"/>
                    </p>
                    <p>
                        Campo 3 :<input type="text" name="campo3"/>
                    </p>
                </form>
            </div>
        </div>
        <div class="contenitore">
            <div class="intro">
                <p>Clicca</p>
            </div>
            <div class="form">
                <form>
                    <p>
                        Campo 1 :<input type="text" name="campo1"/>
                    </p>
                    <p>
                        Campo 2 :<input type="text" name="campo2"/>
                    </p>
                    <p>
                        Campo 3 :<input type="text" name="campo3"/>
                    </p>
                </form>
            </div>
        </div>
    </body>
</html>
 
Discussioni simili
Autore Titolo Forum Risposte Data
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
G [PHP] Creare script di prenotazione con controllo disponibilità. PHP 7
F Creare elementi html con javascript Javascript 4
Shyson Modificare codice e creare link PHP 0
Cosina Creare bottone delete in form upload PHP 5
Cosina Creare bottone delete in form upload PHP 1
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
L Creare una forma geometrica Photoshop 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
S Libreria PHP per creare file dwg o dxf PHP 0
R Come creare sistema Add to homescreen PHP 3
L Creare un countdown con giorno specifico della settimana PHP 3
W Creare link di una dato Classic ASP 0
W creare file .jar Java 2
M Creare con il Vb 2010 Il Classico Notes di Windows Vista Visual Basic 1
MarcoGrazia Creare una password Snippet Javascript 0
J creare pagina php di prenotazione PHP 5
A Creare un modulo di ricerca avanzata con dreamweaver HTML e CSS 0
INTEROPERABILITY Sviluppatrice/formatrice creare APP Offerte e Richieste di Lavoro e/o Collaborazione 0
L Creare una pagina pre-home WordPress 1
G Creare side-bar non visibile da dispositivi mobile HTML e CSS 0
L creare oggetti da una classe tramite un form Javascript 0
Web93 CREARE SITO WEB COMICS CON WORDPRESS WordPress 0
maxnegri Contare sessioni aperte e creare condizione PHP 1
A Come creare pulsante donazione PayPal HTML e CSS 5
L [CERCO] Creare blog su WordPress con tema Divi Offerte e Richieste di Lavoro e/o Collaborazione 3
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
R [Photoshop] Creare Azione Photoshop 1
F [PHP] creare tabella e tasto cerca PHP 3
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
B [PHP] Creare PDF dopo inserimento dati form PHP 4
A [HTML] Creare sito web per eLearnig HTML e CSS 2
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
Spenalzo Creare tabelle multiple con Access via VBA MS Access 2
R [PHP] Creare sistema random PHP 3
D [PHP] Consigli su come creare form PHP 1
I Creare Qsl radioamatore con testo editabile Presentati al Forum 1
T [PHP] Creare Honeypot per form contatti PHP 10
S [PHP] Creare collegamento filtri di ricerca al database PHP 6
Z Creare VirtualHost Apache2 con PHP? Programmazione 0
max_400 [HTML] Come creare un jpg animata (non gif animata) HTML e CSS 3
A Come creare un framset Sviluppo app per Android 1
T con oop creare un ciclo per una pagina dinamica html con php PHP 3
X [Apache] Creare sito clone/preservare codice sorgente Apache 7
E [PHP] creare temporary table per dati da xml PHP 2
M [MySQL] CREARE UN LINK SU UN DETERMINATO CAMPO DI UNA TABELLA RISULTATO DI UNA QUERY SQL MySQL 3
P [Photoshop CC] Come posso creare quest'effetto - cerchi concentrici Windows e Software 6
R [PHP] creare pagina profilo per ogni utente PHP 4
V [WordPress] Creare una struttura di articoli da una struttura di cartelle WordPress 1
jonnino2004 Sito .it vale la pena creare una versione in inglese? SEO e Posizionamento 1

Discussioni simili