Come creare navigazione stile Facebook

Marco Tardelli · 9 Feb 2013

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 · 12 Feb 2013

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>

Cerca

Cerca

Come creare navigazione stile Facebook

Marco Tardelli

Nuovo Utente

criric

Super Moderatore

Discussioni simili